WordPress Theme: Part 2

You should already have saved a file, index.php. Now we’re actually going to slaughter this file and cut it up. If you’re familiar with PHP includes, you can jump to the next paragraph. If not, read on. Basically, every page is going to have the same “header”, that is, the top of your webpages with your pretty site title, will generally be the same, as will the bottom, with all your copyright information. The only part that changes is the content – which, as we learned in part 1, is in the content div.

Take your index.php file and highlight everything from the beginning right down to, and including, <div id="content">. Now cut this text – don’t copy, but cut – and paste it into a new document. You should have the following (or something similar, if you’ve done some editing):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<title><?php wp_title('separator', true, 'right'); ?> <?php bloginfo('name'); ?></title>
     <?php wp_head(); ?>
   </head>
     <body>
        <div id="container">
          <?php get_sidebar(); ?>
           <div id="content">

Save this file as header.php, and upload to your theme folder. Remember what this was called? Yes, blocks. You can ignore this file for the time being.

Head back to index.php. You won’t have too much code left. However, in place of the text we’ve just killed, you need to place the following code: <?php get_header(); ?>. Remember that <?php get_sidebar(); ?> calls for the sidebar? Well, this one we’re now putting in calls on the header.php file we’ve just created.

Now we’re going to highlight the rest of the text left in index.php, except the PHP include we’ve just put in. Cut the text and paste it into a new file, called footer.php. It should look like this:

           </div>

           <div id="footer">
           </div>

        </div>
     <?php wp_footer(); ?>
     </body>
</html>

Upload this footer.php to the blocks folder. You can fill in the space between <div id="footer"> and the <div> following it – it will be your footer with copyright information and such.

Go back to index.php and paste the following code: <?php get_footer(); ?>

This calls on the footer.php file we just created. Now you should have the following in your index.php file:

<?php get_header(); ?>

<?php get_footer(); ?>

Save your file. Now remember that you should leave these two functions alone as they are very important to piece together your theme so that it looks right on the front-end.