The Right Way to Include Stylesheets in Your WordPress Theme

An update to the WordPress Theme Tutorial in 14 Lessons regarding how you should include stylesheets in WordPress is in order. As I did in lesson 2, (and normally when developing web pages) you place all stylesheets in <link rel="stylesheet" ...>s in the <head> section. In lesson 11 I explained the right way of including scripts, providing greater control of when to load scripts and dependencies. WordPress has a similar mechanism for stylesheets as there is for scripts which makes this: the right way to include stylesheets in your WordPress theme.

WordPress allows registering and enqueueing stylesheets, just as with scripts. Using WordPress’s enqueueing on javascripts are more critical since scripts may fail if they are loaded in the wrong order (a script using jQuery before the jQuery library is included for example). Still, stylesheets loaded in the wrong order can unintentionally override style rules making the site look bad or even break something.

By enqueueing stylesheets you also has the advantage of them being under WordPress’s cache control. The stylesheets stay cached (which means faster loading times), and WordPress won’t use resources to load a new version of the stylesheet until you tell it to.

Getting Down to the Code

Just like we did in including Javascript the right way, we define a function in the theme’s functions.php and hook it onto wp_enqueue_scripts. Don’t be fooled by the name, this hook is intended for both scripts and styles. This means that you’d put all your registering and enqueueing of both scripts and stylesheets in one single function. How’s that for clear and neat code?

In the function hooked onto wp_enqueue_scripts, we register and enqueue styles using wp_register_style() and wp_enqueue_style(). The arguments are somewhat different than of scripts, so let’s see an example of adding two stylesheets: one local stylesheet file, base-style.css, and jQuery UI’s smoothness CSS library from Google CDN with the previous stylesheet as a dependency. Remember to always first register stylesheets before enqueueing them.

wp_register_style('base-style', get_template_directory_uri().'/css/base-style.css', array(), '1', 'screen');
wp_enqueue_style('base-style');
wp_register_style('jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css', array('base-style'), '1', 'screen');
wp_enqueue_style('jquery-ui-style');

An explanation of wp_register_style()‘s arguments:

  1. The first argument is any given unique name we choose to refer it as. We use this name for enqueueing, referring to as a dependency or deregistering.
  2. The second argument is the stylesheet’s path. For a local stylesheet use get_template_directory_uri() and concatenate the rest of the path after it.
  3. The third argument defines the stylesheet’s dependencies. Put the dependencies referred to their names (first argument) in an PHP array.
  4. The fourth argument is the version control. Define any number here, and change it to refresh the cache whenever you’ve made change to the stylesheet. It may be a good idea to maintain an increasing number, such as '1.0', and increase it to '1.1' or '2.0' on updates.
  5. Finally we specify the media for which this stylesheet has been defined, such as all or screen.

WordPress Codex Function references:

Keep in mind that the hook wp_enqueue_scripts gets activated only when in front-end of your site. If you need to load scripts or stylesheets for the admin dashboard, use the hook admin_enqueue_scripts, and for the login screen use the hook login_enqueue_scripts.