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.
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
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_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
- 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.
- 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.
- The third argument defines the stylesheet’s dependencies. Put the dependencies referred to their names (first argument) in an PHP array.
- 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
- Finally we specify the media for which this stylesheet has been defined, such as
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