Technology

How to enqueue a custom stylesheet via functions.php in WordPress

Posted by Pixafy Team

enqueue-custom-stylesheet-WordPress-blog-graphic

If you haven’t noticed by now, WordPress’ newest theme Twenty-Twelve, has been all the rage lately, as well as the newest Blank Slate theme based on it. It’s responsive, has a template set for home already with it’s own separate sidebar and the most noticeable thing for developers is it’s cleaner and more segregated file structure.  One of the biggest changes and challenges that some developers will come to face is the way stylesheets are called in these themes or themes similar to it. Usually stylesheets are called from the header.php. In these themes, the header.php is cleaned up and these tasks are done via the functions.php file instead.

This file at one time, was a mystery to me, and in many ways, it still is. All I knew was that it was super important and shouldn’t be tinkered in unless I was confident in what I was doing. Truth is, you don’t have to understand every single line that’s in the file, but it’s going to help to know some basics – like for our case, we need to apply our own stylesheets because for whatever reason, we don’t want to use the default stylesheet. Now of course, you can go ahead and just do it the old fashioned way in the header.php, and it’s not going to break anything, but why change the theme structure when it’s not as hard as you think?

All we have to do is enqueue our files. Now what the heck does that mean? Well, a queue, in our case, is a list of data and to enqueue, is to add something to that list. In the functions.php, you should find the function that’s now in charge of applying stylesheets. It will look like this:

function twentytwelve_scripts_styles() {

/*Lots of stuff will be in here*/

}

Luckily for us, these themes should be well commented to find what we need. If not, not to worry, what we need to find is where the default stylesheet is being called. It will look like this:

wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() ); //default

What WordPress is essentially doing is creating a function that adds a stylesheet to the list/queue. In layman’s terms, wp_enqueue_style is specifying that what we’re adding is a stylesheet, not a script file or something else. The first set of quotes within the parenthesis is a unique name given to this stylesheet call that WordPress uses as an ID, so be sure that it’s not the same as another existing ID in your theme. Lastly, get_stylesheet_uri() is getting the default path to the theme stylesheet which is in the root folder of the theme.

Now that we understand a bit more of what’s going on, how do we get this to work for us? We can copy and paste directly beneath, except we’re going to make a few changes:

wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() ); //default

wp_enqueue_style( 'custom-style’, get_template_directory_uri() . ‘/custom.css' ); //our stylesheet

Now the first thing you’ll notice is that although we’re still using wp_enqueue_style since we are also adding a stylesheet, we’ve given it a unique name, ‘custom-style’. And instead of using get_stylesheet_uri, which will always refer to the existing default stylesheet and nothing else, we’re using get_template_directory_uri, which will take us to the root folder of the theme without automatically referring to the default stylesheet that we don’t want.

To continue our path after the url, we combine PHP and a new string of ours with a period followed by quotes. In these quotes, we continue the path to our stylesheet after the back slash. In our case, the stylesheet is also in the root folder of the theme just like the default stylesheet. If we’re making a folder of our own for css, and have called it css, then we’d continue the path with . ‘/css/custom.css’ instead.

And there you have it! But that’s it? That can’t be it. Oh, but it is! If you scroll down beneath where the twentytwelve_scripts_styles ends, you’ll find another piece of PHP that looks like this:

add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );

This is saying, hey WordPress, fire that twentytwelve_scripts_styles function, or put it into action. If you inspect or view the source code of your theme in the browser, in the head tags, you should see your stylesheet being called beneath the default stylesheet. If the path is correct and it has it’s own unique name/ID, it should look like this:

<link rel="stylesheet" id="twentytwelve-style-css" href="http://localhost/wordpress/wp-content/themes/twentytwelve/style.css" type="text/css" media="all">

<link rel="stylesheet" id="custom-style" href="http://localhost/wordpress/wp-content/themes/twentytwelve/custom.css" type="text/css" media="all">

You can see that our ID, “custom-style” is in place along with our path. And that’s it. You can continue to add stylesheets in this way and feel just a bit of pride for using the functions.php which has now gotten just a bit less mysterious – and that’s always an awesome level up for developers. Mystery solved.

We’d love to hear from you! Leave us a comment below or tweet us @Pixafy!