Stylehack

This series of articles assumes you have at least basic XHTML and CSS skills, and little-to-no PHP skills.

One thing I get asked about quite a bit is how to customize (modify) an existing theme, in particular without using widgets. Basically the questions fall into 4 main categories:

• Changing the Header Image
• Modifying the Footer Content
• Changing text labels
• Modifying the Sidebar

Before we can jump into making any theme modifications, you need to understand how the sections of a post-related page are generated. This might seem a little more technical than you want to get, but trust me… it will make it all that much easier when you actually begin modifying a theme.

IMPORTANT:   For the purpose of this series of tutorials, I’ll be using the WP 2.5.1 DEFAULT template for all examples.

The main workhorse file for a WordPress blog is called index.php. GASP! Whaddya mean, php… where’s the HTML??? A WordPress blog uses PHP scripting to pry the stored content (posts) out of a database and display it in a web browser. It accomplishes the display of this data by adding bits and pieces of HTML around the information it retrieves from the database. So the short answer is… the HTML gets generated by the PHP files “on the fly”. Don’t be so dramatic… get up off the floor! It’s not that scary, just follow along okay? “-)

Here’s what index.php looks like [I've removed some sections because we're only looking at overall structure]:

<?php get_header(); ?>
<div id="content" class="narrowcolumn">
 ---> I removed the php code here, called "The Loop", which displays the posts
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now that’s not too scary looking, is it? Look closer… in between all that PHP gobbledygook you even see some familiar HTML — the <div> tag set! Now don’t you feel like you’re in more familiar territory?

The index.php file first loads the header for the page/site (get_header), then a regular old XHTML <div></div> tagset is created that contains the posts. Next, it calls the sidebar (get_sidebar) and then, last but not least, loads in the page/site footer (get_footer).

I expect now you think that if you want to modify the sidebar, you should be looking for a file called “get_sidebar.php”, right? WRONG! Each of those bits of “get” code are defined functions. Functions are like macros for PHP, a way of repeating an action without having to do it all over from scratch each time.

The functions used in index.php to call the page sections are all contained in a file named general-template.php, located in the wp-includes directory of your WordPress installation. Here is the function defined in that file that loads the sidebar:

function get_sidebar( $name = null ) {
	do_action( 'get_sidebar' );
	if ( isset($name) && file_exists( TEMPLATEPATH . "/sidebar-{$name}.php") )
		load_template( TEMPLATEPATH . "/sidebar-{$name}.php");
	elseif ( file_exists( TEMPLATEPATH . '/sidebar.php') )
		load_template( TEMPLATEPATH . '/sidebar.php');
	else
		load_template( ABSPATH . 'wp-content/themes/default/sidebar.php');
	}

Okay, that’s just way too much information! However, you need to see at least the detail of this function simply so I can make a point:

1. The function get_sidebar checks for 3 versions of the sidebar, in this order (called “hierarchy”)…
   1. 
      A specially named sidebar, with a specific name (or number) after the word “sidebar” like “sidebar-1.php”. See the ($name=null) code in the very first line? Whatever you put in the ( ) when invoking the function is used as the value of $name. If you call sidebar-1.php, by invoking the function like this: get_sidebar(1), the function looks for a file named “sidebar1.php”. If there is no value provided for $name in the ( ), the PHP process skips on to the next section of code.
   2. 
      When no specially defined sidebar is being called (or if one is called but doesn’t exist on the server), the script next looks for a plain old “sidebar.php” in your theme directory; that’s the next section of code that starts with “elseif”. In most cases this is going to apply to your theme.
   3. 
      And finally, if both a) and b) above are false [there is not a sidebar.php file of any kind in your theme directory, specially named or not], the script will then use the sidebar.php file in the default theme directory. That’s that last piece… the “else” section.

That last one [1(c)] is very important. If for some reason you are working with a custom design and the author has not provided you with a theme-based sidebar.php file, you will have to either modify the default one (NOT recommended in most cases) or place a copy of it in your custom theme’s directory and then modify it!

I won’t make you look at each function in index.php being used to create the structure now that you know a) where to find these basic functions in case you have questions about what they are doing, and b) if any of these basic structural files do not exist in your theme directory you will have to get a copy from the default theme and place them in your theme directory before you begin making modifications.

Here are the files index.php calls:

[path/to]wp-content/themes/[theme/name]/header.php
[path/to]wp-content/themes/[theme/name]/sidebar.php
[path/to]wp-content/themes/[theme/name]/footer.php

PLEASE KEEP IN MIND that your custom theme may be different than the default theme and may call other files, like “get_sidebar(1)” in the example above. So it will be up to you to read things carefully when you begin modifying files!

Now that you have a general idea of how your blog is generated and the files involved, there are a couple of housekeeping steps you need to perform before you make any modifications…

Article 2 will deal with those steps — creating a copy of the theme being modified and making the files “writable” so that you can use the WordPress Theme Editor. Please visit again soon or use one of the subscription links at the top of the sidebar on the right to be notified when the next article is posted.