As a hack every now and then I used to add in javascript or CSS files with links hardcoded directly into the header.php or footer.php template files of a WordPress theme.
This really is a no no! as this can result in script conflicts or duplications or just downright badness, there is a logical method to add all javascript and CSS files and for them to be recognised properly by WordPress and loaded safely in either the header or footer of the page and to have any other dependent scripts also loaded without conflict.
Register and Enqueue
The correct method in WordPress to load javascripts and CSS files is to register the scripts and then to enqueue the script. The register process; wp_register_script() for Javascript or wp_register_style() for CSS, basically tells WordPress about the script, and the enqueue process; wp_enqueue_script () for Javascript or wp_enqueue_style() for CSS, tells WordPress to run/load the script.
The difference between register and enqueue is subtle and in fact, you could just get by with just using the enqueue step by itself but for sake of doing it the proper way lets use both processes.
Function and functions.php
So where do you add in the scripts and CSS? well, that’s all done in your functions.php file of your theme located in the theme folder and added in as a unique function.
If you are using a child theme which you should be and can’t see a functions.php file then just create one and ensure the file starts with an opening PHP tag.
<?php
Let’s create a function in functions.php that will store all our javascript and CSS files to use and with that function we need to instruct WordPress to load the function by adding an action.
function mythemename_all_scriptsandstyles() {
// Load JS and CSS files in here
}
add_action( 'wp_enqueue_scripts', 'mythemename_all_scriptsandstyles' );
So the steps are to create a function name that is unique, prefixing it with a theme name abbreviation and descriptive words are a good idea in this case mythemename_all_scriptsandstyles, surrounding the function in a curly brace set to later put in the scripts and then to add an action to call the function to load all the scripts and styles.
The action; add_action is using the WordPress PHP function wp_enqueue_scripts to load all the scripts and styles at once in my new function; mythemename_all_scriptsandstyles
So the wp_enqueue_script is used for each individual script and then collectively in the action.
Adding in a Javascript File
Ok let’s load a Javascript file in, plenty to chose from, I use placeholder.js a lot for legacy browsers to display default text in input form fields and also, add the javascript in a js folder in your theme’s folder
function mythemename_all_scriptsandstyles() {
// Load JS and CSS files in here
wp_register_script ('placeholder', get_stylesheet_directory_uri() . '/js/placeholder.js', array( 'jquery' ),'1.0.0',true);
wp_enqueue_script('placeholder');
}
add_action( 'wp_enqueue_scripts', 'mythemename_all_scriptsandstyles' );
So by registering the script with wp_register_script(), you pass in 5 arguments separated by commas, 2 of which are compulsory for it to work:
the name – whatever you like, best to be similar to the script – compulsory
the location – where the script is stored – compulsory
any script dependencies – what other scripts if any are required – optional
the version – you can name this whatever you like, best to name it what the version actually is – optional – defaults to WordPress version number
header or footer location – true for the footer, false for the header – optional – defaults to header
Script Dependencies
If your script is dependent on other scripts be sure to find out what they are and also register and enqueue them too, WordPress comes with a bunch of scripts so check to make sure that it may already be available, the full list is in the WordPress Codex here.
So if your scripts are dependent on other scripts that are already registered then add these in the array() format as above the array can include multiple dependent scripts just separated by commas in the array.
Adding in a CSS File
Now, let’s add in a CSS file and use a Google font as an example.
function mythemename_all_scriptsandstyles() {
// Load JS and CSS files in here
wp_register_script ('placeholder', get_stylesheet_directory_uri() . '/js/placeholder.js', array( 'jquery' ),'1.0.0',true);
wp_register_style ('googlefonts', 'http://fonts.googleapis.com/css?family=Hammersmith+One', array(),'1.0.0','all');
wp_enqueue_script('placeholder');
wp_enqueue_style( 'googlefonts');
}
add_action( 'wp_enqueue_scripts', 'mythemename_all_scriptsandstyles' );
First thing is to remember to change the WordPress PHP function names to style instead of script; wp_register_style() and wp_enqueue_style()
The wp_register_style() also has 5 parameters;
the name – whatever you like, best to be similar to the style – compulsory
the location – where the style is stored – compulsory
any dependent stylesheets – what other styles if any are required – optional
the version – you can name this whatever you like, best to name it what the version actually is – optional – defaults to WordPress version number
media type – for example, ‘all’, ‘print’, ‘handheld’ – optional – defaults to all
It’s more likely just to pass in the first 2 parameters for CSS files. Remember to also declare the wp_enqueue_style function after, passing in the name of the style googlefonts in the above instance.
Adding a Script to Only the Home Page
You can also selectively declare if you just want a style of script to load just on a particular page. This example will use the smooth-scroll,js script just to be on the home page only.
function mythemename_all_scriptsandstyles() {
// Load JS and CSS files in here
wp_register_script ('placeholder', get_stylesheet_directory_uri() . '/js/placeholder.js', array( 'jquery' ),'1',true);
wp_register_style ('googlefonts', 'http://fonts.googleapis.com/css?family=Hammersmith+One', array(),'2','all');
wp_register_script ('smoothscroll', get_stylesheet_directory_uri() . '/js/smooth-scroll.js', array( 'jquery' ),'1',true);
wp_enqueue_script('placeholder');
wp_enqueue_style( 'googlefonts');
if ( is_front_page() ) {
wp_enqueue_script('smoothscroll');
}
}
add_action( 'wp_enqueue_scripts', 'mythemename_all_scriptsandstyles' );
So here the smooth-scroll.js file is registered normally with wp_register_script, but in the wp_enqueue_script function it is being conditionally loaded to only the home page. This is done by adding in an if statement with a conditional tag wrapped around the wp_enqueue_script function with a pair of curly braces.
There you have it, by keeping all the scripts and styles under one generic function makes managing everything a lot simpler and easy to use.
As a hack every now and then I used to add in javascript or CSS files with links hardcoded directly into the header.php or footer.php template files of a WordPress theme.
