InMotion Hosting Support Center

new-template-installedIf you've been following along in our tutorials series on creating Joomla 3.0 templates, you would have seen in our last tutorial after changing site templates that the template does not look very nice at all (see screenshot to the right).

The reason the template looks a mess is because the CSS file that we created is not being called correctly, and is actually resulting in a 404 error.

In this tutorial we will show you how to properly include CSS and JS files within a Joomla 3.0 template.


Before we Begin: Background information

In our template, we have two files that we want to include:

  1. css/style.css
  2. js/main.js

We will be updating our template's index.php file to include these files. As the template is already installed on the server and we are technically not adding any files to it (because the style.css and main.js files are already on the server), we will update the template file directly on the server. This will save us time as we don't need to edit the files on our desktop and then reinstall the template to see the changes.


Adding CSS and JS Files to a Joomla 3.0 Template

  1. Open for edit your index.php file

    As our template's index.php file is already on our Joomla Hosting account, we are going to use the file manager within our cPanel to edit the file.
  2. Use $doc->addStyleSheet and $doc->addScript to include files

    At the top of your template, use $doc->addStyleSheet to include your css/style.css file and $doc->addScript to add your js/main.js files. For these functions to work, we must also add $doc = JFactory::getDocument(). So far, we've updated the top portion of our index.php file, and the code in green below shows those changes.

    addStyleSheet('templates/' . $this->template . '/css/style.css');
    $doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');
  3. Remove the previous calls to include these files

    Within our head tag, we previously included css/style.css and js/main.js. We are now going to remove these two lines of code, which you can see below crossed through.

  4. Add within your head tag

    The next thing you'll need to do is use to programmatically print code within your header. Basically what this will do is add the necessary HTML within your head tag to include the CSS and Javascript files.

    The example code below shows what the top of our index.php file looks like after performing all the steps in this article:
    addStyleSheet('templates/' . $this->template . '/css/style.css');
    $doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');

    Once we make these changes and save our index.php file, we'll go back to our Joomla site and refersh the page. As you can see, our template is looking a bit better than when compared to the screenshot at the top of this article.

Was this article helpful?
You are viewing Section 7: How to Include CSS and Javascript files in a Joomla 3.1 Template
Section 6: How to change your Joomla 3.1 Site Template
Section 8: How to add Bootstrap to a Joomla 3.1 Template

Joomla Community Google+ Hangout #3

June 3rd, 2014

Thank you @RustyJoomla for letting me speak on the Joomla Community Google+ Hangout!

Click here to watch!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Support Center Login

Our Login page has moved, Click the button below to be taken to the login page.

n/a Points
2014-11-20 3:05 am

al tratar de instalar mi plantilla html5 me sale este mensaje

Fatal error : Llamada a una función miembro (atributos) en un no-objeto en/home/entihma1/public_html/vistamardorada/libraries/cms/installer/adapter/template.php en la línea 81

Translated by Google: when trying to install my html5 template I get this message Fatal error: Call to a member function (attributes ) on a non-object in / home / entihma1 / public_html / vistamardorada / libraries / cms / installer / adapter / template.php on line 81

31,035 Points
2014-11-20 11:58 am
Hello cesar,

Thank you for contacting us. We are happy to help, but will need some additional information.

What version of Joomla are you using?

What template are you attempting to install?

Can you provide a link to the error?

Thank you,
n/a Points
2014-05-21 2:28 pm

I'm at wit's end. I built a template by using this tutorial. All went very well. But recently I found that there are two js files loading before jquery.min.js (which is included (from <jdoc:include type="head" />). The files are tabs-state.js and caption.js. Both rely on jquery loading first.I don't know why these files are loaded (I disabled and reenabled all plugins and modules one at a time, so it is not that.) I also tried adding JHtml::_('jquery.framework'); to the very top of the index.php file, without success.I'm trying other forums as well but they want to give cryptic answers, like I have to alter the core...NOT!


Why does it just work on the sample template but not on mine? 

9,968 Points
2014-05-21 3:19 pm
Hello Greg, and thank you for your comment!

I did some searching and found other Joomla users that were also having issues with the order in which some JavaScript files were loaded and the impact they had on jQuery.

To help narrow this down a bit, what's the exact version of Joomla that you are running? There were changes to the way jQuery was included in Joomla from version 3.1 to 3.2 and according to this Joomla tabs-state.js in com_content frontend issue reported on the Joomla site, was patched in Joomla 3.2.4.

So that could possibly explain the issue you're having. Most of the fixes I see floating around do indicate that you would need to manually edit the com_content component as that's where the include is coming from, but do mention it could break some functionality as well:


defined('_JEXEC') or die;

You would want to comment out the behavior.tabstate line with two backslashes like this:

defined('_JEXEC') or die;

If we could take a look at your site and your template we might be able to better guess at what could be the issue if this doesn't fix it. Feel free to post any helpful info in your comment on this article and we can remove any private info before approving the comment and making it public.

- Jacob

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

4 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail:
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!