Enqueue Scripts and Style Sheets into Child Themes

To harness the full power of WordPress we need to enqueue scripts and style sheets into our child themes.

In this article I use a functions.php example to show you how to use the wp_enqueue_script and wp_enqueue_style WordPress functions to create a WordPress child theme step by step, and then modify that child theme by enqueuing additional CSS and script files into it.

Child Themes

One of the principal advantages of using WordPress is that you can take a basic theme created by a ‘theme developer’ and build a child theme on top of it with your custom CSS.

Why should I use a child theme?

Answer: When the theme developer updates their theme you won’t lose all your CSS edits.

Why should you write your own CSS? The reality is, there is no design that fits every business. Every company interfaces with their users differently on their website. You should always write your own CSS to make your unique value proposition. The type of device, screen size, and browsers that are used to access your content will vary widely depending upon the business that you have.

Enqueue Style Sheets

Why should I enqueue my theme instead of sticking it into the header.php file?

Answer: We can use PHP to show style sheets based on conditional statements instead. When we enqueue style sheets from the functions.php file we are giving ourselves flexibility ( and performance enhancements ) to call those style sheets using “if, then” statements in other PHP files.

Using the @import method to load style sheets slows down serving our web pages, and simply loading style sheets into our header that cannot be used conditionally limits what we can do.

Enqueue a CSS Style Sheet to Create a Child Theme

To properly enqueue a child theme we are going to use the method described in WordPress’s Codex .

First we will create a new function (“theme_enqueue_styles”) inside our child theme’s functions.php file, and add a WordPress action (“add_action”) with the hook wp_enqueue_scripts that calls our function (“theme_enqueue_styles”).

The hook wp_enqueue_scripts is the proper hook to use when enqueuing items that are meant to appear on the front end. Despite the name, it is used for enqueuing both scripts and styles.

function theme_enqueue_styles() {

}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles' );

Next, we will call the WordPress function wp_enqueue_style to enqueue both our parent theme and child theme. The function wp_enqueue_style has five parameters we can call, the last three of which are optional: (1) $handle (the name), (2) $src (the location of the css file), (3) $deps (dependencies: css files our css file is dependent upon), (4) $ver (the version number of our css file for caching services), and (5) $media (the medium our css file is meant for: the default is set to all, but can be set to ‘screen’, ‘print’, etc.).

In the following example we are using the TwentyTwelve Theme as our parent theme.

The value ‘twentytwelve-style’ is used for the key $parent_style since that was the descriptor of the style sheet style.css called by the wp_enqueue_style function in our parent theme’s functions.php file. (If you don’t know what the descriptor called in your parent theme is, use ‘parent-style’.)

function theme_enqueue_styles() {

$parent_style = 'twentytwelve-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles' );

Note the difference between using the get_template_directory function and get_stylesheet_directory function .

When you use get_template_directory you are targeting the parent theme. When you use get_stylesheet_directory you are targeting the child theme.

Enqueue Mutliple CSS Style Sheets inside a Child Theme

Let’s say we are using multiple CSS files to organize our website.

Since we are using a child theme we will enqueue additional style sheets using WordPress’s wp_enqueue_style function inside the function we created (“theme_enqueue_styles”) to enqueue our child theme’s stylesheet.

For the purposes of this example, we will say that the additional css file we want to add is named ‘buttons.css’, and is inside a folder entitled ‘css’ inside our child theme’s folder.

function theme_enqueue_styles() {

$parent_style = 'twentytwelve-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);

wp_enqueue_style( 'button-style',
get_stylesheet_directory_uri() . '/css/buttons.css',
array( $parent_style )
);
}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles' );

Note that the array we are referencing is the same (‘$parent_style’) for every addtional child theme css file we add to our ‘theme_enqueue_styles’ function.

Enqueue Style Sheets conditionally into WooCommerce

Let’s say you are using a plugin like WooCommerce.

You can use conditional tags with the hook wp_enqueue_scripts to create functions inside your functions.php file that enqueue style sheets only on certain post types.

In the following example, we will create a function (use_flexbox) in our functions.php file to enqueue a css file (flexbox.css) only on product category pages:

function use_flexbox() {

if ( is_product_category()) { 

wp_enqueue_style( 'category-only', get_stylesheet_directory_uri() . '/css/flexbox.css' );
}

add_action('wp_enqueue_scripts', 'use_flexbox' );

Note that since I am using this with a child theme, we are using the WordPress function wp_enqueue_style with the WordPress function get_stylesheet_directory_uri to look for the css file we created within the child theme.

What if we wanted to use a similar function to load a css file only on product pages? Then we would use the conditional tag is_singular to look for a ‘product’ post type: (is_singular(‘product’)).

In this example we will create a function (use_product) in our functions.php file that calls a css file (product.css) we made for our product pages.

function use_product() {

if ( is_singular('product')) { 

wp_enqueue_style( 'product-only', get_stylesheet_directory_uri() . '/css/product.css' );
}

add_action('wp_enqueue_scripts', 'use_product' );

Finally, you can speed up your website by combining css files to cocatenate your HTTP requests.

We will create a function (combine_css) inside our functions.php file and use the PHP logical operator “or”, which is “||”, to create a conjunction. This new function will call a css file (flat.css) where we have combined css from several css files into one.

function combine_css() {

( is_product_category() || is_singular('product')) { 

wp_enqueue_style( 'flat-css', get_stylesheet_directory_uri() . '/css/flat.css' );
}

add_action('wp_enqueue_scripts', 'combine_css' );

Enqueue Scripts

To enqueue scripts onto your child theme you want to create a function in your functions.php file that uses the WordPress function wp_enqueue_script .

The function wp_enqueue_script has one required parameter and four optional parameters we must call: (1) ($handle) the name of the script (which is required), (2) ($src) the location of the script, (3) ($deps) the dependencies you are referencing, (4) ($ver) the version of your script, and (5) ($in_footer) the location where you are loading the script (by default in the footer).

function add_my_script() {
 wp_enqueue_script(
'grid-toggle', // name your script so that you can attach other scripts and de-register, etc.
 get_stylesheet_directory_uri() . '/js/gridtoggle.js', // this is the location of your script file
array('jquery'), // this array lists the scripts upon which your script depends
1.0, // version, not required
true // true = loads script in footer, false = loads script in header
);
}

add_action( 'wp_enqueue_scripts', 'add_my_script' );

In the example above we are referencing the jQuery handle for the jQuery script stored on WordPress.

We know WordPress ships with jQuery from looking at default scripts included and registered by WordPress listed in wp_enqueue_script’s function codex.

The 5th condition of wp_enqueue_script is binary…the script will load either where you see wp_footer (the footer) or wp_head (the header).

A ‘true’ value loads the script in the footer asynchronously with the page load (recommended) and a ‘false’ value loads it in the header preventing page load until the script is loaded.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.