Registering & enqueuing scripts and CSS correctly in WordPress

I see a lot of people registering & enqueuing scriptsand CSS  in WordPress quite poorly.
Here’s how and why.

Adding the CSS and Javascript files directly into the header.php
[codesyntax lang=”html4strict”]
<script type=’text/javascript’ src=’http://ajax.googleapis.com/…/jquery.min.js’></script>
<script type=’text/javascript’ src=’http://…/themes/theme/js/jquery.somescript.js’></script>

This is a crime. Please do not do this! It is impossible to track loading of scripts and is poor coding.

Another way I see is better, making use of the wp_register_style, wp_enqueue_style and  wp_register_scriptwp_enqueue_script functions. Sometimes you see them in the template pages. No, no, no, makes things hard to track. That is just as bad as the first example. Sometimes you see them in functions.php, this is better, but still not amazing.

	wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
	wp_enqueue_script('jquery');

The best way I have found so far is to wrap your wp_register* and wp_enqueue* functions within a custom function.
For example;

function load_my_scripts() {
	wp_deregister_script('jquery');
	wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
	wp_enqueue_script('jquery');
 
	wp_register_script('easyListSplitter', get_template_directory_uri() .'/js/jquery.easyListSplitter.js', array('jquery'));
	wp_enqueue_script('easyListSplitter');
 
	wp_register_script('jqueryCustom', get_template_directory_uri() .'/js/jquery.custom.js', array('jquery'));
	wp_enqueue_script('jqueryCustom');
 
	if (is_front_page()) {
		// include jscroll pane on home page only
		wp_register_script('jscrollpane', get_stylesheet_directory_uri().'/jscrollpane/jquery.jscrollpane.min.js', false, false, true);
		wp_enqueue_script('jscrollpane');
 
		wp_register_script('jscrollpane_wrapper', get_stylesheet_directory_uri().'/jscrollpane/jquery.jscrollpane_wrapper.js', array('jscrollpane'), false, true);
		wp_enqueue_script('jscrollpane_wrapper');
 
		wp_register_style('jscrollpane_css', get_stylesheet_directory_uri().'/jscrollpane/jquery.jscrollpane.css');
		wp_enqueue_style('jscrollpane_css');
	}
}
 
add_action('wp_enqueue_scripts', 'load_my_scripts');

This way, we can add conditionals correctly like is_front_page and we keep all our scripts in the same place.
We also make sure the scripts are loaded at the correct time with the wp_enqueue_scripts hook.
I like to load scripts almost per page, so scripts are not loaded on pages where they are not required.

You could even create custom functions for including the CSS and JS separately.

It is also worth taking note of the extra parameters wp_register_script takes;

  • Such as the second ($deps) where you can specify the scripts dependencies so they load in the right order.
  • The third ($ver) , you can specify the version number, usually I leave this as false it defaults to the WP version.
  • The forth is interesting, ($in_footer), this tells WordPress to load the Javascripts in the footer, rather than the header. Speeding up visual page load and rendering. I always try to load my scripts in the footer, so the content loads first, then the scripts.
Happy nice coding!

 

Author: Kieran Barnes

Kieran is a PHP developer with 15 years commercial experience. Specialist in WordPress, CakePHP, CubeCart and all things PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *