WP Enqueue for Beginners

2020-05-05

Throughout my career designing, developing and auditing WordPress themes, I've come across many that include their custom styles / scripts as static HTML elements inside their respective header and footer templates. This is perfectly fine, but there is a cleaner way to include these files.

This post is purposefully catered for WordPress beginners, so if this seems overly simple, then you're probably already developing WordPress themes that utilize these techniques. (Which is awesome!)

Introducing WP Enqueue

The description of Wp Enqueue from the WordPress documentation:

Registers the style [script] if source provided (does NOT overwrite) and enqueues

In a nutshell: Placing a wp_enqueue_script or wp_enqueue_style script in the functions.php of your custom theme tells WordPress to pull external files into the header or footer of your website. Best practice being: styles into the header, scripts into the footer.

I suggest you read the official documentation for more details: wp_enqueue_script and wp_enqueue_style.

Enqueue Stylesheets

The default script to enqueue a CSS stylesheet:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

So, with all those parameters in mind, here is what a standard default enqueue of a CSS stylesheet looks like:

wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900', '', '1.0', '');

In this example we have rendered the following:

Important: Keep in mind that the wp_enqueue_style script will render the stylesheet link into the WordPress header automatically.

Enqueue Scripts

The default script to enqueue an external JS file:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

With all those parameters in mind, here is what a standard default enqueue of a Javascript file looks like:

wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true );

In this example we have rendered the following:

Packaging Everything Together

Now that we have the custom stylesheet and script ready to be loaded into our custom WordPress theme, we just need to properly package them together as a function in our functions.php file:

// Add styles and scripts to the header/footer
function custom_enqueue_scripts() {
        wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900');
        wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');

That's it! Hopefully this helps prevent WordPress newbies from statically rendering their external CSS and JS files directly in template files. Let WordPress do that for you!