<

Adding a JavaScript or CSS tag to your Joomla header! (per page - not site wide).

Published on
19,482 Points
11,982 Views
Last Modified:
Approved
First of all, we will need Jumi component or Sourcerer plugin for this to work. We need either of these because the main focus here is custom development outside of the standard modules or articles within Joomla.

You can find Jumi here...it's my favority extension to Joomla other than Breezing Forms.
http://extensions.joomla.org/extensions/edition/custom-code-in-content/1023?qh=YToxOntpOjA7czo0OiJqdW1pIjt9

~My little advertisement on Jumi~

*Jumi is a component that allows you to write custom php and js pages and load them into your Joomla site.  So, if you are needing to add some AJAX or interactivity to your website, Jumi is the component for you.  Jumi is compatible with J1.0, J1.5, and J1.6.  With Jumi, you can add custom content to your modules, articles, etc...

New to Jumi?  View these helpful tutorials here: http://edo.webmaster.am/jumi/tutorial

~Now, back to the good stuff!~

When custom coding your pages and you need to add a little javascript or css to it, normally you would have to add those links to the <head></head> location of your template's index.php page...however, now these scripts and css are applied site wide and might mess up the scripts and the css for the template on every page.  There's is a way that you can add these scripts and css pages WITHOUT having to manually add them to your index.php page and that won't affect the entire site's scripts or css.

If you plug this in at the top of your customized php page, you will get the results you need only on the pages you add this code to.

 
<?php
$document =& JFactory::getDocument();
$document->addStyleSheet('files/css/default.css');
$document->addScript('files/scripts/test.js');
?>

Open in new window


This will add the script and css file to the <head> tag for that particular page.  Then you can feel free to modify that page without worrying about messing up the entire site.

Please view these two Joomla articles that will provide further assistance for you, if you should run into any trouble.
http://docs.joomla.org/Adding_JavaScript
http://docs.joomla.org/Adding_JavaScript_and_CSS_to_the_page
0
Enjoy this complimentary article view.

Get unlimited access to our entire library of technical procedures, guides, and tutorials written by certified industry professionals.

Get 7 days free
Click here to view the full article

Using this article for work? Experts Exchange can benefit your whole team.

Learn More
COLLABORATE WITH CERTIFIED PROFESSIONALS
Experts Exchange is a tech solutions provider where users receive personalized tech help from vetted certified professionals. These industry professionals also write and publish relevant articles on our site.
Ask questions about what you read
If you have a question about something within an article, you can receive help directly from the article author. Experts Exchange article authors are available to answer questions and further the discussion.
Learn from the best.