Matt Varone - Creative Designer

— 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:

<script src="http://<?php echo $_SERVER['HTTP_HOST']; ?>/js/jquery.js" type="text/javascript"></script>

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" />

<script src="<?php bloginfo('template_url'); ?>/js/jquery.js" type="text/javascript"></script>

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>

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!