The WordPress Post Templates

In the last article we used the WordPress loop to begin putting post content on our pages. We’ll do the same now using the WordPress post loop to start populating our post blog content. We’ll do this in 2 places – on the home page we’ll have our most recent posts display with links to their individual content. We will also populate the content on the individual pages.

The first thing to do is open our index.php file again and put in the loop. Open index.php and paste in the following:

<?php

get_header();

?>

<!-- Start the Loop. -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="post">

<!-- Display the Title as a link to the Post's permalink. -->

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->

<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

<!-- Display the Post's content in a div box. -->

<div class="entry">
<?php the_excerpt(); ?>
</div>

<a href="<?php the_permalink(); ?>">&raquo; read more</a>

<!-- Display a comma separated list of the Post's Categories. -->

<p class="postmetadata">Posted in <?php the_category(', '); ?></p>
</div> <!-- closes the first div box -->

<!-- Stop The Loop (but note the "else:" - see next line). -->

<?php endwhile; else: ?>

<!-- The very first "if" tested to see if there were any Posts to -->
<!-- display. This "else" part tells what do if there weren't any. -->
<p>Sorry, no posts matched your criteria.</p>

<!-- REALLY stop The Loop. -->
<?php endif; ?>

<?php

get_footer();

?>

So we’ve done a couple of things here – we’ve opened the loop and told WordPress to start listing the posts. If you’re working with the default install of WordPress, you only have one post. You can create some more to see multiples listed.

We start the loop and give some conditions for categories and search. WordPress will by default use this for all three types of pages – the index page, category indexes and search results. We use some other code to bring in other parts of our post – the author, date, title, permalink, comments etc…

Now all we need to do is get the individual permalink pages working. Go back to the template folder and create a new file. We’ll save this as “single.php”. This is what WordPress looks for for displaying single pages.

In the single.php file, paste the following code:


<?php

get_header();

?>

<div id="content" class="narrowcolumn">

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <?php the_author() ?> </small>
</div>
<?php the_content(); ?>

<?php comments_template( '', true ); ?>

<?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php posts_nav_link('','','&laquo; Previous Entries') ?>
</div>
<div class="alignright">
<?php posts_nav_link('','Next Entries &raquo;','') ?>
</div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
<?php endif; ?>
</div>

<?php

get_footer();

?>

This code will populate the permalink content for each blog post and display all of its information and content. You can obviously modify these templates to your liking. Its really that easy.

In the coming articles, we’ll explore optional page and post templates. You might want a special post to have a slightly different look than the others and this is easily achieved with WordPress.

About Ted Forbes:
Ted ForbesI've been working with WordPress since it came out back in 2003 on various design and photography sites that I've had over the years. Check out my