Add page-specific javascript or CSS in Joomla

Question

How do you include a javascript or CSS file only on a certain article in Joomla?

I have one article which requires the jQuery UI and associated theme. Since this isn't being used on any other pages, I only want it for this particular article. Adding in the necessary <script> and <link rel="stylesheet"> tags in the HTML of the article doesn't work, since they get stripped out when saved.

If there was a method to include certain files, or to stop the stripping of those tags, that'd be really good.

Duplicate: stackoverflow.com/questions/1573831/…

Casebash
– Casebash

2010-04-07 01:41:19 +00:00
Commented Apr 7, 2010 at 1:41 — Casebash
– Casebash, Commented Apr 7, 2010 at 1:41

jlleblanc · Accepted Answer · 2009-04-17 02:48:53Z

7

I ended up creating a plugin to do this for a site I maintain; I may release the code for it, but it's pretty simple to explain. You build a content plugin that searches for tags like {css path/to/a/css/file.css}, strips them out, then adds the files to the HTML <head>. Once you have the name of the CSS or JS file you want to include, here is the code you use to get it in the header:

$document =& JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'path/to/style.css');
$document->addScript(JURI::base() . 'path/to/script.js');

answered Apr 17, 2009 at 2:48

jlleblanc

3,51027 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

m1r0 · Accepted Answer · 2012-03-13 22:32:07Z

4

For this job use the Joomla plugin "Sourcerer". You can put PHP and Javascript in articles with it and still have time left to bake a pie! I just added the code to the article and it worked like a charm. Beware of evil editors that will strip parts of the code. Html Entities are your friend - you can use them. Sample code:

{source}<?php
$doc =& JFactory::getDocument();
$doc->addStyleSheet( JURI::root( true ).'/example.css' );
$doc->addCustomTag( '<script src="/example.js" type="text/javascript"></script>' );
$doc->addScript( JURI::root( true ).'/example.js' );
?>{/source}

answered Mar 13, 2012 at 22:32

m1r0

4607 silver badges18 bronze badges

1 Comment

jezhug Over a year ago

Awesome! This was exactly what I needed to easily add a Google Lead Conversion code in a Joomla page.

Mohammad Naji · Accepted Answer · 2012-09-10 12:12:05Z

0

Set your editor to Editor - None, and use any <script> and <style> that you want.

Don't forget that you should avoid editing that article using TinyMCE or other editors later.

answered Sep 10, 2012 at 12:12

Mohammad Naji

5,44410 gold badges56 silver badges81 bronze badges

Collectives™ on Stack Overflow

Add page-specific javascript or CSS in Joomla

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related