Adding stylesheet and scripts using JDocument class in Joomla is the most standard way of adding them to head section. Here I will give you some tricks for some situations , we have to add some scripts in the page after the template styles or scripts.

We know that the standard script and stylesheet adding options using JFactory::getDocument .

For adding CSS we use like below.

$doc = JFactory::getDocument();
$doc->addStyleSheet(JURI::root().'your custom css path');

or something like .

$document = JFactory::getDocument();
// Add styles
$style = 'body {'
. 'background: #00ff00;'
. 'color: rgb(0,0,255);'
. '}';
$document->addStyleDeclaration($style);

For adding  JS   files like below,

$doc = JFactory::getDocument();
$doc->addScript('your custom js path');

or some declaration only you can use like below,

$document = JFactory::getDocument();
// Add Javascript
$document->addScriptDeclaration('
window.event("domready", function() {
alert("An inline JavaScript Declaration");
});
');

The above methods are familiar to every one, we know that this will add the CSS or JS at the head portion of the page, But sometimes we have to reorder some styles or JS or adding some scripts after the template scripts. How can we manage such a situations ? we know that we can edit the templates index.php file and add scripts or CSS after the head portion.

<jdoc:include type="head" />

Ok, What about we are developing a component or module for public we can’t say to users to go and edit their template index.php for installing our component. So this time we can use Joomla’s  addCustomTag options.

$stylelink .= '<link rel="stylesheet" href="../css/IEonly.css" />';
$document = JFactory::getDocument();
$document->addCustomTag($stylelink);

Keep in mind it will not add the CSS or JS into the head section it just add the files just above your module or component HTML section

 

with this method we can load the CSS or JS after the template CSS or JS files and avoid jQuery library conflict in many case.

In some cases people need to customize the head section rendering. But its not recommended things bcoz Joomla updates override this core changes when an updates comes. For that situation users can edit the head section the file path is follows.

libraries\joomla\document\html\

We have some limitations using JDocument class in Joomla for achieving more features , But in Joomla latest version its possible with JHTML class . like overriding CSS and JS files like our template override methods. Stay tune for the Joomla tips and tricks.

Hope this article will help you to understand the basic usage of JDocument Class in Joomla.