Creating a WordPress Theme — Part 3

In the previous post in this sub-series, we learned how to start displaying content on our WordPress blog. Today, we will start working with individual posts and pages.

Sub-Template Files

To start off, we will first need to split our template into several sub-template files. These contain different parts of the template, such as the header, footer and sidebar.

header.php

Create a new file called header.php. Inside of index.php, select everything from the top of the file to the end of the header. In this case, it's the end of the header <div>. Paste it into header.php. At the top of index.php, insert the following code.

<?php get_header(); ?>

WordPress knows that the header will be in header.php, so it will grab it from there.

sidebar.php

Next, create a file called sidebar.php. This file contains — you guessed it — the sidebar. Cut out the entire sidebar <div> from index.php and paste it into sidebar.php. Then, where you removed the sidebar in index.php, add in this code:

<?php get_sidebar(); ?>

This pretty much does the same thing as get_header(), except with the sidebar.

footer.php

Finally, we need to put the footer into a separate file. Select everything from the beginning of the footer in index.php to the bottom of the file, and paste it into a new file called footer.php. To get the footer from footer.php, use the following code.

<?php get_footer(); ?>

Individual Pages

Creating the template for WordPress pages is quite easy, now that our index.php file is much simpler than it was before.

Create a new file called page.php and copy the contents of index.php into this new file. Find the divs for the "latest posts" and "latest work" boxes and delete them. We won't be needing those on our individual pages.

Next, change the ID of the "featured post" box to "content", and delete the current <h2> inside of it. This box is basically the same as the old "featured post" box, but changing the ID will make it simpler to make changes to it in the CSS.

Also, delete the following code from this box.

<?php
    $sticky = get_option('sticky_posts');
    rsort( $sticky );
    $sticky = array_slice($sticky, 0, 1);
?>

This was used to display only sticky posts here, but we don't need that here.

Now, simply change the <h3> tags around to h2, and remove the <a> tags around it, to remove the link. After all, the title of the page doesn't need to be a link to itself, if you're already on that page.

Finally, change the_excerpt(); to the_content(); because we don't want to only show an excerpt of the page.

Single Posts

The next part is to create the template for single posts. In a new file called single.php, copy in the entire contents of page.php. For now, the single post template will be similar to the page template, with a few changes.

Post Meta Data

Post meta data basically shows some information about the post, such as the author, the date and categories. To add this into our theme, simply add in the following line of code above the line containing the_content();.

<p class="postmetadata"><?php the_date(); ?>, in <?php the_category(', '); ?>, by <?php the_author(); ?>.</p>

This is a simple line of post meta data, showing the post's date, the categories, and the posts's author. There are many other things that you can add, such as tags and information about comments. To learn more about post meta data, check out the WordPress Codex.

As always, be sure to leave a comment if you have any questions about today's article!

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

One Comment

  1. Justin Deleon
    November 16, 2009

    Thanks! These posts have been very helpful.