Correct way of adding CSS and Javascript references to WordPress themes
— Around two 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 give 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 you might not be aware of if you are starting with this. 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 template functions given by wordpress.
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 where this functions, so to make it more accessible I went a bit further and used the following code:
<link rel="stylesheet" href="<?php $_SERVER['HTTP_HOST']; ?>/print.css" type="text/css" media="print" />
This way I could move the theme to another domain without having to worry about the files path, but few minutes later I realized that I was hosting my JS files and extra’s CSS and images files outside the theme folder, again a horrible practice since at the end I was having the theme files all over the place. So decided to study a bit more and I found that WordPress gives, within other things, a function to retrieve the path of the theme folder. So at the end i started using this code and keeping files all together in their correct places:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />
You can also use this function when you need to hard code the navigation bar pages:
<ul id="nav">
<li><a href="<?php bloginfo('url'); ?>/about-us" title="About Us">About Us</a></li>
</ul>
If you want to include a JavaScript file, the best way would be to use the enqueue_script function. This function is a safe way to ensure you, your theme and your 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 added it with this function.
<?php wp_enqueue_script('submenu', get_bloginfo('template_url') . '/js/submenu.js' ?>
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!




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
Thanks for the tips. I found them very useful.
You are welcome :)
Thanks Matt. This is awesome.
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.
@Matt
Thanks for the tips!
Where did you get your gravatar from?
@Karl You are welcome. The gravatar is from faceyourmanga.com. thanks for the comment :)
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.
Useful, thank you! :-)