WordPress For the Web Developer: Working With Theme Templates

Once you've set up a WordPress website, your first instinct as a web developer will probably be to modify it extensively. Themes are part of the power of WordPress, whose many free themes allow you to change the look, feel, and even function of your site relatively easily. You can find a general introduction to themes in my previous article How To Select and Modify a Site Template.

A WordPress theme consists of a CSS stylesheet, a collection of image files, and a set of code templates written in PHP. Before you can work with the individual parts of a theme, you'll have to locate the theme editor in the left sidebar of your site administration screen:

Then on the right sidebar, you'll see a list of the editable files that make up the theme:

Some themes may well have more files than this minimal set. The "last but not least" style.css file is perhaps the most important, as quick tweaks there will let you make major changes to the global typography of the site. While there's nothing exceptional about the contents of this file (in terms of the CSS itself), most themes have long, complex stylesheets. I strongly suggest using the "find" capability of your browser rather than scrolling, as you may well underestimate just how far down the file some of this stuff may be hidden! If your CSS skills are not up to snuff, a few minutes spent in our CSS area will pay off quickly.

Because it's so easy to make changes quickly, it's easy to get carried away to the point where you make a bad edit and break your whole site. So before you start messing about with the theme files, I suggest making sure you have an original unmodified copy of everything, perhaps archived as a .ZIP file on your computer. It's also a good idea to document all changes in the "live" code as comments, while including your initials and perhaps the date for each change. It may take an extra few seconds each time at the outset, but it can certainly save a lot more time later.

One peculiarity of WordPress themes I've noticed is illustrated in this particular stylesheet. You might naturally start off by editing the "body" attributes, but with nothing happening until you're blue in the face, because the real content is all IDed as, well, "content":

Here's the start of the main index.php file to show you where this is set up:

Sometimes you find a theme that's almost perfect except that it has an inappropriate graphic at the top of the page. And any good developer should be able to change that graphic for a new and better one in just a minute or two, you'd think...unless you've had this experience with WordPress before. While many themes have the top graphic well-documented and easy to find just where you'd expect it – in the header.php file – it's often buried there, deep in a mass of PHP code. Worse, I've also found that graphic referenced 300 lines down in the style.css file!

If you want to change the look, order or function of anything that's common to the different pages on your site, you'll most likely find it in one of the PHP templates. The trick here, without having to become too great an expert on every internal facet of a WordPress theme, is to think in terms of that commonality.

For instance, if your blogroll is showing up after the archives in the sidebar, and you want to change the order in which they appear, the file you should look for is (hopefully) sidebar.php. Some themes have more than one sidebar, in which case the "extra" one is generally clearly named "left" or "right" to distinguish it.

Many themes now have "widgets", which allow you to literally drag and drop a complete function (such as "blogroll" or "banner") onto either the left or right sidebar. You may find it confusing to use both the widget and hard-coded functions simultaneously. Some people just choose to use the widgets that add functionality. Some developers disable the hard-coded functions altogether, because it's much easier to rearrange widgets by simply moving them around.

One thing I generally do on non-blog WordPress sites is to remove the "Meta" functionality, which is intended for multiple users/writers to log in and clearly unneccessary on such sites. This code is usually also found in the sidebar and often looks something like this:

<ul>

<li><h4>Meta</h4>

<ul>

<?php wp_register(); ?>

<li><?php wp_loginout(); ?></li>

<?php wp_meta(); ?>

</ul>

</li>

</ul>

Simply put PHP comments (<!-- and -->) around this block of code to prevent it from even showing up on the page. More to the point, this is an illustration of how easy it is to find and isolate blocks of code in well-written WordPress themes.