In How To Create A Wordpress Theme - Part 3, you created a Wordpress compatible index page. In this part you are going to split into it’s sub-components, header, index, sidebar and footer. Then you shall learn how to create the single post page along with comments and track-backs.

Preparation

As in the previous parts of this series, before you start editing any files:

• Start your Web Server.
• Open your browser and open the homepage.

Create The Template Files

There are four basic template files you need to create:

• index.php
• header.php
• sidebar.php
• footer.php

These are all derived from the index.php file that you created last time. Open index.php and then go through the following steps:

Highlight lines 129-220 and press ctrl-X
Press ctrl-N, then the Enter key to create a new file
Press ctrl-A then ctrl-V to copy
Select File > Save As, name the file as footer.php

Highlight lines 77-126 and press ctrl-X
Press ctrl-N, then the Enter key to create a new file
Press ctrl-A then ctrl-V to copy
Select File > Save As, name the file as sidebar.php

Highlight lines 1-44 and press ctrl-X
Press ctrl-N, then the Enter key to create a new file
Press ctrl-A then ctrl-V to copy
Select File > Save As, name the file as header.php

We now have the four files, close them all except for the index.php.
At line 1 type:

<?php get_header() ?>

At line 34 type:

<?php get_sidebar() ?>

At line 37 type:

<?php get_footer() ?>

These three Wordpress functions pull in their respective pages into index.php just as if they were typed in. For example, get_header() will get replaced by all the code contained in header.php.

Save index.php and refresh browser. The page should not change, if it does you have made a mistake in the slicing.

The Single Post Page

The single page is the page that shows a single post and any comments and/or track-backs for that post. To create it you save index.php as single.php.

Now you have to make some changes to it. At the moment the Post Title has a link around it. This needs to be removed as we are are already on the page we don’t need a link to get there.

Change line 8 to:

<h2 class="entry-title"><?php the_title(); ?></h2>

Adding Comments

Next you need to add the function to show the comments and track-backs. Place cursor at end of line 18 (single.php), press Enter, then on line 19 add:

<?php comments_template(); ?>

This will display the comments for you, but really it would be nice to format them as you want to. To do this, first copy comment.php from the default theme into the mytheme folder.

Separate Track-backs From Comments

Comments and Track-backs are displayed in the order that they are received. It is much neater to display the comments first and then the track-backs.

Find:

<?php foreach ($comments as $comment) : ?>

and add after it:

<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type == 'comment') { ?>

Find:

<?php endforeach; /* end for each comment */ ?>

and add before it:

<?php } /* End of is_comment statement */ ?>

A couple of lines after you will find:

</ol>
<?php else : // this is displayed if there are no comments so far ?>

Add this between those lines:

<?php $tb = false; ?>
<?php foreach ($comments as $comment) : ?>
  <?php $comment_type = get_comment_type(); ?>
  <?php if($comment_type != 'comment') { ?>
    <?php $tb = true; ?>
  <?php } ?>
<?php endforeach; ?>
<?php if ($tb == true) : ?>
  <h3>Trackbacks</h3>
  <ol>
    <?php foreach ($comments as $comment) : ?>
      <?php $comment_type = get_comment_type(); ?>
      <?php if($comment_type != 'comment') { ?>
        <li><?php comment_author_link() ?></li>
      <?php } ?>
    <?php endforeach; ?>
  </ol>
<?php else : ?>
  <h3>No Trackbacks</h3>
<?php endif; ?>

This has two loops. In the first one, a variable called $tb is assigned a value of false. The loop then looks at all comments and track-backs. If there is one or more track-backs found then $tb is assigned the value of true. Then there is an if statement that says "If $tb has the value true then display the title and all the track-back-backs otherwise display a title that shows that there are no track-backs".

Style The Comments

Now that the comments and track-backs are separated, you can style the comments as you like. I prefer to remove the comment numbering. There is also a style called alt that allows you to style alternate comments differently, this makes them easier to read. In style.css find the line:

/* INDEX PAGE POST NAVIGATION */

Just before it add:

.commentlist {
  margin: 0px;
  padding: 0px;
}
.commentlist li {
  list-style: none;
  border: 1px solid #999;
  background: #eee;
  padding: 10px;
  margin: 0px 0px 10px 0px;
}
.commentlist li.alt {
  background: #ccc;
}
.commentlist li a, .commentlist li a:visited {
  text-decoration: none;
  color: #a33;
}

Styling The Comment Form

I don’t like the "Leave a Reply" header (around line 87) it sounds to demanding to me, I prefer to ask a question of the visitor, so I changed it to:

<h3 id="respond">What are your thoughts?</h3>

Around line 114 find the line that starts with:

<p><textarea name="comment"

on that line there is a cols="100%" change it to cols="60". This wraps up the comments for now.

The HomePage

There is an ongoing debate about the homepage of a blog. Should we have full posts or excerpts? Some people get really worked up about it. Me, I’m in the excerpts camp. With excerpts the homepage is shorter so it will download faster, people can quickly scan the titles to see what they want to read and it’s good for SEO as the full article is only on the single page. All it costs is a couple of extra clicks.

With this in mind, I shall show you how to convert the homepage to excerpt format. If you do not want an excerpt based homepage, still do the following but save it as excerpt.php, we shall use it in the next lesson.

Open index.php and around line 12 find the line:

<?php the_content('Read the rest of this entry »'); ?>

and change it to:

<?php the_excerpt(); ?>

Next go to line 10 that starts with:

<div class="postmetadata">

and at the end of it you should see a </div>. Put your cursor in front of the < and press the Enter key twice, this makes a blank line before the </div>. Go down to line 18 that starts with:

<?php comments_popup_link

and highlight the whole line, then press ctrl-X. Move the cursor back up to the blank line. Type a "|" and a space, then press ctl-V.

Around line 16 you will find the start of the second postmetadata div. Highlight the whole div (lines 16-19) and press Delete.

Save the file and then view the homepage in your browser. At the end of each excerpt you will see "[…]" which means there is more to the post. Also the only way to view the whole post is by clicking on it’s title, some viewers may not realize this, they will get frustrated and leave.

First thing to fix is the excerpt itself. In the Admin Panel when you create or edit a post, at the bottom of that page you will see a section called Optional Excerpt. In there you can copy and paste the first paragraph of your post. Better still, write a short summary of the post, including your keywords.

When you use the <!--more--> tag you get a prompt after the excerpt. We can mimic this behavior. At line 16 add the line in red:

    </div>
    <a class="morelink" href="<?php the_permalink(); ?>">CONTINUE READING ==></a>
  </div>
<?php endwhile; ?>

Then in style.css find the line /* SIDEBAR */ and add the following before it:

.morelink {
  text-decoration: none;
  margin-bottom: 5px;
  color: #a33;
}

The header Link

The title graphic is enclosed by a link so that when you click on it you are taken back to the homepage. Now that we have more than one page this needs to be modified so that when you are on the homepage there is no link, but there is when you are on any other page.

Open header.php. The line that needs modifying is second up from the bottom of the file:

<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name') ?>"><img src="<?php
bloginfo('template_url'); ?>/images/title.jpg" alt="My blog name" /></a>

Replace it with:

<?php if (is_home()) : ?>
  <img src="<?php bloginfo('template_url'); ?>/images/title.jpg" alt="My blog name" />
<?php else : ?>
  <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name') ?>"><img src="<?php
  bloginfo('template_url'); ?>/images/title.jpg" alt="My blog name" /></a>
<?php endif; ?>

is_home() is a Wordpress function that returns true if the current page is the homepage, otherwise it returns false. So the code you added says "If this is the homepage then show the image otherwise show the image wrapped in a link".

That just about wraps up the work for today. You now have a functional homepage and single post page with comments and track-backs.

You can download all the newly modified files, just right-click the image and download. It’s a zip file that contains the complete theme up to this point. Next time we shall look into creating other pages such as archives, tags, categories etc.