This is the next part of the WordPress series. In the last part, Modifying a WordPress Theme - Part 2, you styled the sidebar. In this part you shall style the post itself. To do this part you need to have completed the last part or at least download the modified files.

When you write a post and publish it, you are actually making a number of copies at the same time. They can be found in Archives, Categories, Searches, the front page, one for each Tag you used and of course the single page. Some people even put their post in two or more categories and this doubles the amount of duplicates that you already have!

This is bad for SEO as it is duplicate content as far as the search engine is concerned. This is one reason why, if you look at this blog, the only place you can see a full post is on the singles page. It is also why each post is in only one Category.

Some blogs show the full post on the front page as well. This has it’s pros and cons. Some people will not click a link to read the full article so you may lose them. If you have too much content on the front page some will not wait for it all to download and you will lose them. If you look at most of the probloggers they are moving over to excerpts on the front page.

Page Layout

In this part, I will show you how to style the single page. First of all, in HTML-kit, load up single.php. If you look at the diagram to the right, I have gone through the single.php and drawn the major elements of the page so that you can better visualize what the code means. You may notice that the code is indented this is another visual hint.

Open up your browser and go to a single post page. At the top of the page you will see the navigation, which is repeated further down just above "Post a Comment". Next is the post’s Title, this is usually a h2 tag (h = header 2=2nd largest header).

<mini-rant> In a lot of themes I have seen, this is a link, WHY?!? You are already on the page, clicking on it just causes more network traffic.</mini-rant>

Then you have the body of the post (entry-content) followed by the meta data (entry-meta) this includes the date, author of the post etc. The last bit is the comments area. All of this is held inside the content div.

You may have noticed that everything is touching the left side of the browser window, this does not look very good, it needs a bit of space to breath. As everything is inside the content div, you can apply some padding to only the left side of it.

Open style.css and go to line 28 and press enter then add:

div#content {
  padding-left:10px;
}

Save it and then refresh the browser, looks better, yes?

The Post Title

Now we turn our attention to the Title area. At the moment there is only the title. You can have whatever you want in that area. If you look at the Title area for this post you will see I have the date and author there, some blogs put all the meta info there. Have a look around other blogs, see what you like, then decide what you want to be there. I shall show you how I did mine and then how to vary it.

So that you can put things in place, you will need an arrangement of divs as shown here. As you can see there are two divs inside another div, in code this would be:

<div>
   <div>
   </div>
   <div>
   </div>
</div>

Now give them names so that we can style them, in this case we shall use classes:

<div class="posthdr">
   <div class="datebox">
   </div>
   <div class="hhdr">
   </div>
</div>

Before we go any further you should start putting this into single.php. Open it in HTML-kit and go to the end of line 12 and hit enter, then type in the above code.

Now we shall put some text into the divs. Inside the datebox div type:

<p><small><?php the_time('j') ?></small><br />
<?php the_time('M') ?></p>

I have put the date inside a paragraph (<p>). the_time() is a php function that will return the date in different formats. In this case the first has a j to show the day part of the date and the second one has an M to show the first three letters of the month. We want them on seperate lines so there is a break (<br />) at the end of line 15.

Then inside the hhdr div type:

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

The first line is the post title, if you look below all the code you entered you will see the same line, you can safely delete it. The second line is a paragraph that holds the name of the author that is shown by using another php function the_author(). Once you’ve typed it all in save single.php.

Now we shall style it. Load up style.css and go to the end of line 39 and hit enter. Then enter the following:

div.posthdr {
  margin-bottom: 15px;
  border: 1px solid black;
}
div.datebox {
  float: left;
  width: 50px;
  background: #90befc;
}
div.datebox p {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  margin: 5px;
  padding: 0px;
}
div.hhdr {
  float: left;
}
div.hhdr h2 {
  font-size: 2em;
  margin: 0px 0px 0px 10px;
}
div.hhdr p {
  font-size: .7em;
  margin: 0px 0px 0px 10px;
}

Then save it. I have given the posthdr div a black border so that you can see it. When I am developing css I do this to all the divs (different colors) so that I can see where they are. I also gave the datebox div a light blue background for the same reason.

If you have two divs together they will be on top of each other, to get them side by side you have to float them. A float is like an align it can go left or right, in this case both the datebox and hhdr are floated left.

The posthdr div already has all margins set to zero, I wanted a small gap between it’s bottom and the post’s text so I have set margin-bottom to 15 pixels.

The text inside hhdr would naturally be tight up against the datebox so I have given both the h2 and the paragraph a left margin of 10 pixels.

The rest of the css is just for sizing the text. Now view the page in the browser, it should look something like the image to the right. If not, go over the code and make sure you didn’t miss anything out.

We just have two things left to do, first you can delete the line:

border: 1px solid black;

From the posthdr div. The other thing is the datebox. I want a gradient background box. To do this I took a screen capture of the page and then in PhotoShop I made a box the same size as the light blue box and saved it as datebox.jpg. You can right-click and save image. This is saved in the image folder at:

FLASHSTICK:\www\wordpress\wp-content\themes\sandbox\images

You can then change the div.datebox background css to:

background: url(images/datebox.jpg) no-repeat;

Save it and then preview in the browser.

There is one drawback to using this layout. If your post’s title is too long it will go over the single line and will not display so nicely. Therefore it should be used only with fixed width layouts. Also when you create your post title you should really be writing short snappy titles that attract the readers attention.

The Post’s Footer

Once the visitor has read the article, what do you want them to do? Sign up to your rss feed, continue reading other articles, vote for you on a social site, buy something, add a comment. These are all valid objectives, the footer should give the reader a choice of one or two of these options.

There is also other information about the post that can be included in the footer, for example the tags that you are using for the post and the post’s trackback URL.

If you look at the current footer it is a mini paragraph in it’s own right, with a lot of info in it. This can cause the reader to skip it, so let’s clean it up.

Highlight lines 31-52 and delete them, this should leave:

<div class="entry-meta">
 
</div>

If you are going to use tags (I recommend that you do), then add this line between the tags:

<?php the_tags('<strong>Tags</strong>: ', ', ', '<br />'); ?>

This uses a php function, the_tags(), to print a list of all the tags that are used for this post followed by a break (<br />). If there are no tags the line will not be printed. Below this line add:

<strong>Category</strong> <?php the_category(', ') ?> |
<?php edit_post_link('Edit', '', ' | '); ?>

On this line we use the php function the_category() to print the Category the post is in, followed by the edit button. If you wish you could give the entry-meta div a colored background. You do this by adding this to the end of the style.css:

.entry-meta {
  background: #90befc;
  padding: 5px;
}

If you don’t like this you could instead change the color of the links like this:

.entry-meta a {
  color: #5050fc;
}
.entry-meta a:hover {
  text-decoration: underline;
}
.entry-meta a:visited {
  color: #666;
}

This will make the links a blue color. When you move the mouse over a link it will become underlined. If you have clicked on one of the links and then returned to the page the link will be a gray color.

Save and preview in the browser and you’re finished. Here are the updated style.css and single.php, you will need to change their extensions from txt to css and php respectively and remove the -3 from the filenames.

Next time we shall continue to modify a WordPress theme by styling the comments section.