You are here:Home»KB»Web Design»CMS»Joomla»Add CSS and JS files to a Joomla Extension
Thursday, 21 November 2019 15:25

Add CSS and JS files to a Joomla Extension

Written by

These are my notes I made while researching this subject. There are many different ways to do the same thing.

Read this article first because it explains the different methods clearly: J3.x:Adding JavaScript and CSS to the page - Joomla!

Notes

  • For your extension CSS and JS files to be overriden in a template you must use JHtml::stylesheet() and JHtml::script(). These functions have extra code in them that checks the various locations for files that would be allowed to override your files, and if present they do. In the end these 2 functions load addScript() and addStyleSheet() appropriately just with a different URL.
  • As of Joomla 3.8, the majority of classes have been namespaced but with a fallback for when migrating to J4. So, you can still use JHtml::XXX, but the new approach is: 
    use Joomla\CMS\HTML\HTMLHelper;

HTMLHelper::_('script', 'path/to/file.js');
HTMLHelper::_('stylesheet', 'path/to/file.css');
  • Most of the Joomla core classes are all now in libraries/src.

Examples

Different Methods I have found. Some might be dated but at least you know I have seen the same things.

/* Add CSS and JS to the <head> */

// Method 1
$document = JFactory::getDocument();
$document->addStyleSheet( JUri::root() . 'modules/mod_helloworld/css/helloworld.css' );
$document->addScript( JUri::root() . 'modules/mod_helloworld/js/helloworld.js' );
$document->addStyleSheet( JURI::base()."components/com_jdownloads/assets/rating/css/ajaxvote.css", 'text/css', null, array() ); 
$modules->doc->addStyleSheet($url . '/modules/mod_easyblogticker/assets/styles/ticker-style.css');
$doc->addStyleSheet(JURI::base().'plugins/content/maogalleryview/css/maogalleryview.css', $type = 'text/css', $media = 'screen,projection');
$doc->addScript(JURI::base().'plugins/content/maogalleryview/js/slider.mini.js', 'text/javascript');

// Method 2
JFactory::getDocument()->addStyleSheet( ltrim($mtconf->get('relative_path_to_js'),'/') . 'jquery.typeahead.css');
JFactory::getDocument()->addScript( ltrim($mtconf->get('relative_path_to_js'),'/') . 'jquery.typeahead.min.js');

// Method 3 - This allows overriding
JHtml::stylesheet('mod_helloworld/css/helloworld.css', array(), true);
JHtml::script('mod_helloworld/js/helloworld.js', false, true);
JHtml::script('com_joomlaupdate/default.js', false, true, false);

/* Misc */

// Method 1 - I found this in a template default.php and have not tested it
echo JHtml::stylesheet('mod_mt_filter/mod_mt_filter.css',array(),true, false);

Use these in your extensions

// Add CSS and JS to the <head> - This method allows overriding
JHtml::stylesheet('mod_helloworld/css/helloworld.css', array(), true);
JHtml::script('mod_helloworld/js/helloworld.js', false, true);

References

Official Documentation

3rd Party Articles

 

Read 928 times Last modified on Thursday, 21 November 2019 17:00
Published in Joomla
back to top