Correct way of adding CSS and Javascript references to WordPress themes


One thing that never ceases to amaze me is how incredible is the simplicity WordPress gives to developers to build themes. There are a lot of great functions and constants to help you, not only to develop but also to keep your theme code flexible and clean.

Today I will share with you a little tip to keep in mind. If your theme requires to have more than one stylesheet file, or include external javascript files the best way to point to those files is by using these two functions that are given by WordPress wp_enqueue_script and wp_enqueue_style .

The first time I built a theme for testing I made the big mistake of typing the whole fixed address to my theme folder which is a horrible practice! but then I didn’t knew that there were these functions, so to make it more accessible I started using this code and keeping files all together in their correct places:

WP_ENQUEUE_SCRIPT

If you want to include a JavaScript file, the best way is to use the wp_enqueue_script function. This function is a safe way to ensure you, that your theme and plugins wont load the same script more than once. As you can see in the codex pages WordPress ships with a varied list of javascript libraries. In case you want to add a custom script or one that is not on the list you can simply add it to your theme with this function. Be sure to place this on the functions.php file of your theme folder.

<?php
wp_enqueue_script(
      'Name of the script, lowercase string',
      'path to the file .js',
      'array of scripts it depends on',
      'version of  the script',
      'boolean value to select whether you want to print the script in the footer or in the header'
);
?>

An example would be:

<?php
wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/scriptname.js',array('jquery'),'1.0',true);
?>

For this to work correctly you have to call it inside the action wp_enqueue_scripts:

<?php
function mv_my_theme_scripts()
{
   wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/scriptname.js',array('jquery'),'1.0',true);
}
add_action('wp_enqueue_scripts','mv_my_theme_scripts');
?>

WP_ENQUEUE_STYLE

If you want to include a CSS file it’s very similar and it’s done by using the wp_enqueue_style function. This function is also a safe way to ensure you that your theme and plugins wont load the same style more than once. Be sure to place this code too on the functions.php file on your theme’s folder.

<?php
wp_enqueue_style(
      'Name of the style, lowercase string',
      'path to the file .css',
      'array of stylesheets it depends on',
      'version of  the file',
      'value to select the type of media you want to assign to your stylesheet'
);
?>

An example would be:

<?php
wp_enqueue_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css',false,'1.1','all');
?>

And inside an action all:

<?php
function mv_my_theme_styles()
{
   if (!is_admin())
   wp_enqueue_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css',false,'1.1','all');
}
add_action('wp_enqueue_scripts','mv_my_theme_styles');
?>

I hope you find this article useful, if you have any other tip you would like to share please feel free to leave it in the comments. cheers!

Reactions (21)

  1. Wow! This is good stuff! I appreciate you writing this post. I am about to redesign my site (in wordpress) and this will be helpful to know.

    Thanks!

  2. Wow! This is good stuff! I appreciate you writing this post. I am about to redesign my site (in wordpress) and this will be helpful to know.

    Thanks!

    Thanks Thomas, you are welcome! im glad you find it useful

  3. Thanks for the tips. I found them very useful.

    You are welcome :)

  4. Pingback CSS Resources

  5. @Matt

    Thanks for the tips!

    Where did you get your gravatar from?

  6. Thanks! This is exactly what I was looking for. I’m starting a new JavaScript based theme and I want to do it right this time.

  7. goesnowhere

    Just noticed the example has an apostrophe too many:

    ‘get_bloginfo

    this one should not be there

  8. Why go through all this trouble? Just using /extra.css as the path works just as fine.

  9. Matthew

    Thanks for this. I was hoping someone took the time to educate others on the process. I didn’t want to update the theme I was using because of the changes I made to the CSS file. Now I can use a CSS file that won’t be deleted when I update.

  10. Its not working for me. Is there something I need to include in the header.php file to make this code work?

    • Hi Rosa,

      It should work as it is. Make sure to change the paths and filenames of your JS and CSS files on the code example.