How to create a Wordpress Template or Theme

September 21, 2006

Step Five: Miscellaneous Important Stuff

One very large important factor I have failed to mention so far is how to link properly to certain things – namely stylesheets. Now, remember in our original template code, the stylesheet link was your everyday


<link rel="stylesheet" href="global.css" />

Well, that won’t work here. Because your files will no longer be located in the root of your site, leaving the link like this will cause your stylesheet to not be picked up by the browser. This is a bad thing. You must “WordPress” this link! Since you will always have a default stylesheet (styles.css – see step two!), then there is one wordpress tag that will always work, and should be used as the default:


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />

Wait! You say. What about other stylesheets? Like when you create a separate stylesheet for print? Or how about one within a conditional comment for IE? That won’t work for those. However, there is an alternate way to call it in without hard-coding the long URL yourself:


<?php bloginfo('template_directory'); ?>

What this does is put in the path to your template directory. So, say you have a print stylehseet you also want to use with the default. You would do this:


<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" media="print" />

Note how I added the “/filename here” at the end of the PHP call. The above PHP code will work for anything that needs the path to the files called in. You just add the filename afterwards so you get the results you desire.

I should also note that, if there are any links or images within your template that do need the full URL (usually for outside linking purposes – this isn’t a common need, though!) you can use that PHP code anywhere in your template. Just tack on the filename at the end.

I would also like to address the comments_popup_link(); area, in the “feedback” section of the index.php file. What this does is provide a popup window when the end user clicks on the “Comments” link at the end of each post. For this to work, you must insert the following line in your header:

<?php comments_popup_script(400, 400); ?>

Basically, that puts the popup script in the header of your page. The “400″s you see there are the width and height of your popup window and can be altered to any size you wish.

Now, if you do not wish to have the comments popup in a new window, simply leave that line out of your header.php file. That will remove the popup, leaving your comments in line with the post. This, of course, will not be on the main page – what it does is, when the end user clicks on the “Comments” link to leave a comment, it’ll take the end user to an archived page with the comments area at the bottom.

Pages: 1 2 3 4 5 6 7

View Comments

Sorry, comments are now closed on this post. You may thank the spammers for that one. But if you have any questions, please feel free to email me and ask - maybe it'll make for a good update in a future post. :)