Have you ever wanted a website design that was yours? Are you sick of going to blogs and seeing the same design over and over again. Know some HTML? Run WordPress? Then maybe designing your own WordPress template is for you.

WordPress Template: Content

If you been following this guide from the start, you should now have four files of your theme completed (style.css, header.php, footer.php, and sidebar.php).

Tonight we’re going to be working on the content of our theme. The content part of the theme is where all of your entries will reside. It’s going to be the section that your readers will be dealing with the most, so make sure you take your time with it.

Once we complete the content of the theme, we’re going to put it all together; so you can test your theme. Although we won’t be finished with the theme tonight, we’ll be getting pretty close; to the point where you can start to see your theme develop.

The first step tonight, just like any night, is creating a new file. We’re going to be saving this file in the same folder as all of your other theme’s files, so pull up that location now. Create a new text document, and name it theloop.php. Now it should be noted that theloop.php is not a standard WordPress file. It is, however, a very useful file, which will make your theme development so much easier. This file will contain the guts of your theme, and will be used in several situations (post pages, pages, etc.).

Starting The Loop

WordPress calls this part of your theme The Loop. The reason it gets its name is because when you load up a page, this part of your theme repeats itself multiple times until it’s out of posts. Now that you know what The Loop is, let’s start are own loop.

To start the Loop, all you have to do is insert this line:

<?php if (have_posts()) { ?>

This line tells WordPress to display the following content if a post or multiple posts exist. You’re going to want to put any HTML that you’ll want at the top of the list of posts after this line. Any code you insert after you start The Loop will only be displayed once, and if a post exists on that page.

Displaying the Posts

Now that we have our Loop running, we should start displaying posts. Insert this line to accomplish that:

<?php while (have_posts()) { the_post(); ?>

Now we’re into the guts of The Loop, and we’re going to have a lot of information in here. Any code you put after this line will be displayed for every post. So if you’re on the home page, and there is twelve posts; the code you put here will be displayed twelve time.

There are several WordPress tags that will aid you in displaying the content, so I’m just going to give you run down in list format. You should try to use all of these tags, as they will help you and your readers. You can click the link of each WordPress tag to find out some more about it, and possible advanced configurations.

• <?php the_ID(); ?> - Outputs the post number. Useful for assigning a <div id=”"> to the post.
• <?php the_permalink() ?> - Outputs the URL to your post page of the entry. For example, this would output something like: http://website.com/entry/
• <?php the_title(); ?> - Displays the title of the post. For example, in this entry it would output: Designing a WordPress Template: The Content
• <?php the_time(’D, M j, Y g:i a’); ?> - Displays the time and date of the post, depending on how you configure it.
• <?php the_category(’, ‘); ?> - Displays all of the categories that a post belongs to.
• <?php comments_popup_link(’0 Comments’, ‘1 Comment’, ‘% Comments’); ?> - Displays a text link of how many comments the post has, with the link pointing to the entries post page.
• <?php edit_post_link(’edit’); ?> - Will display an edit link, which will only be visible to logged in WordPress administrators.
• <?php the_content(”"); ?> - Displays the text of the post. What you’re currently reading has been outputted by the_content. You can configure the text that gets displayed when there is a <!–more–> in your post by changing the text in between the ” and the “.
• <?php trackback_rdf(); ?> - Displays the RDF information on how to trackback your post. This shouldn’t be read by human eyes, so make sure to comment it out.

Alright, we’re almost done with The Loop. What we want to do next is tell WordPress that we’re done displaying posts. That can be done by adding this tag:

<?php } ?>

Now that WordPress knows that we’re done displaying posts, you can add any HTML that you want to be displayed at the bottom of all the posts, if there are posts of course.

Displaying Errors

Now by the off chance you visit a page that doesn’t have a post (this can happen if you do a search and does not yield any results), you’ll want to have an error message in place, so your readers won’t be staring at a blank page. This can be done with this line of code:

<?php } else { ?>

Now after that line of code, put any HTML that you want displayed if there are no posts on a page. There are not any WordPress tags that go here, so don’t worry about them.

Closing the Loop

After you type out your error message, we should close off The Loop. You can do this with the same line of code that closed off your posts:

<?php } ?>

Congratulations, we’ve now finished The Loop. Now let’s put it all together so we can see what this theme looks like.

Putting It All Together

We now have all the files we need to have a working template. Well, not exactly. We need to create a page which puts all of the files we have made together. This file will be called index.php, and should be saved where you have been saving all of your other template files.

Since this file is usually the same for everybody, if you have followed my guide, I’m going to just give you the code to do. Isn’t that nice of me?

<?php get_header(); ?>
<div id="content">
<?php include (TEMPLATEPATH . '/theloop.php'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

We now have a working template. So, go ahead and upload it to your site and give it a test.

Conclusions