Correct way of adding CSS and Javascript references to WordPress themes

Last update ( 5/3/2010)

— Around three years ago or so I started developing themes for WordPress for the company that I work, and one thing that never ceased 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 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_bloginfo('template_url') . '/js/scriptname.js',array('jquery'),'1.0',true);
 ?>

WP_ENQUEUE_STYLE

Now If you want to include a CSS file it’s very similar and it’s done by using the 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 function too on the functions.php file in your theme 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_bloginfo('template_url') . '/css/my-style.css',false,'1.1','all');
?>

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!

Tags: , ,

Sunday, October 5th, 2008 WordPress

→ If you find this post useful please consider inviting me a cup of tea :) Thanks!

12 Responses to “Correct way of adding CSS and Javascript references to WordPress themes”

  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. Vin Thomas on October 6, 2008.
  3. 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

  4. Matt on October 6, 2008.
  5. Thanks for the tips. I found them very useful.

  6. gameshed on October 7, 2008.
  7. Thanks for the tips. I found them very useful.

    You are welcome :)

  8. Matt on October 7, 2008.
  9. Thanks Matt. This is awesome.

  10. Ariyo on October 7, 2008.
  11. Perfect timing. Building a WordPress site (my first) on my dev domain (http://www.dragontheory.com/wall2.0c)and was wondering how I was going to change all those hard coded URLs when I move to the production domain. Low-and-behold there you go! Thanks.

  12. Dragon on October 9, 2008.
  13. @Matt

    Thanks for the tips!

    Where did you get your gravatar from?

  14. Karl on November 22, 2008.
  15. @Karl You are welcome. The gravatar is from faceyourmanga.com. thanks for the comment :)

  16. Matt on November 22, 2008.
  17. 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.

  18. Hawk in Winter on January 24, 2009.
  19. Useful, thank you! :-)

  20. Bestie on January 11, 2010.
  21. Just noticed the example has an apostrophe too many:

    ‘get_bloginfo

    this one should not be there

  22. goesnowhere on August 16, 2010.

Leave a Reply

About Me

Matt Varone - Matias Varone - sksmatt
HI there,

I'm a freelance creative web developer, UI designer and hobbyist musician.

Twitter Status

Flickr Gallery

    Blue WallClutter drawerCS4 Replacement iconsCS4 Replacement icons