How to Add CSS/Javascript to Your Joomla Extension

Welcome to the new HowToJoomla!

We've completely revamped the design to make the site easier to read and easier to navigate. We hope you like the changes!

December 07, 2009 | by Brian Edgerton | 2 Comments

This article applies to Joomla! 1.5 development. This information is subject to change in Joomla! 1.6.

When writing your custom component or module, more often than not, you will want to include your own CSS or Javascript code. If Joomla! did not provide an easy way to do this, you would be forced to use script tags throughout your code. While this approach would technically work, the best practice is to put all scripts inside the head tag of your page. How is that possible when the of your page is only seen on your template index.php file and you're developing a new module or component? The JDocument class is the answer. Let's look at the easiest way to go about doing this.

First we need to grab the JDocument object:

$document = JFactory::getDocument();

Now let's add a stylesheet:

$document->addStyleSheet('url/to/my/stylesheet.css');

It's just as easy to add a Javascript file as well:

$document->addScript('url/to/my/script.js');

Remember, if you are using relative url's, they must all be relative to the root index.php file. If you would like to use absolute url's, build them like this:

$document->addStyleSheet(JURI::root().'url/to/my/stylesheet.css');

Now, that's easy enough, but sometimes you may want to add a snippet of CSS or JS code to a single page instead of loading an external file. The only difference here is that you will need to store your CSS/JS code in a variable and then add it with the JDocument object.

$css_code = "
    #myDiv {
      padding: 5px;
      margin:10px;
      border:1px solid #dedede;
    }
 
    div.someClass {
      background:#000000;
      color:#ffffff;
      height:100px;
    }
  ";

This time we use a slightly different JDocument function:

$document->addStyleDeclaration($css_code);

Again with Javascript (useful for adding MooTools events):

$js_code = "
    window.addEvent('domready', function() {
      $('myDiv').addClass('someClass');
    });
  ";
 
  $document->addScriptDeclaration($js_code);

And that's all there is to it. We have only mentioned a few of the methods available in JDocument. It provides quite a bit more functionality, but we will save that for another day. More details can be found on the Joomla 1.5 API documentation.

About the Author

Brian Edgerton is a full time web developer born, raised, and currently residing in Burlington, North Carolina. A Computer Science major in college, he developed a curiosity for all things electronic at a young age. When he is not furiously coding away in front of his computer, Brian enjoys sports, movies, books, and falling asleep in his recliner. Brian is a Zend Certified PHP5 Engineer. He is also currently working on a Master's of Software Engineering degree through Auburn University. In addition to PHP, Brian is also proficient in Javascript and CSS/XHTML and likes to pretend he knows a few things about Linux server administration as well.