Helping ordinary people create extraordinary websites!
GET OUR NEWSLETTER
Your Email:
 

WordPress Customization

By Justin Laing
2008-01-09


Blog / Post Templates

Single Post Example

Maybe you want to display an ad at the bottom of each post, or perhaps you’d like to add or remove the author information under the post header? The place to do these things is in the single.php file. This file controls the layout of your individual post pages.

Let’s examine the components of this file for the default WordPress theme:

<?php get_header();
?>

This just calls your header.php template. It’s nice to use your header.php file to display all the common header HTML code for all your pages. That way you can avoid writing the same <head>…</head> and beginning <body>… content over and over.

<div id=”content”
class=”widecolumn”>



<?php
if (have_posts()) : while (have_posts()) : the_post(); ?>

Here is where we start “The Loop”. In WordPress each page normally has a “loop” on it that cycles through the content that should be displayed on that page. In our single.php template there would normally just be one “post”, which means the loop would just execute once to display that one post. The if (have_posts()) code first checks to see if we have a post to display, then the while (have_posts()) loops through each of the posts, the_post(); simply prepares the post for display. Most pages will have this same loop code on them. WordPress takes care of deciding what posts should go on which pages in most instances. Occasionally you’ll want to customize what posts are displayed within the loop, but we’ll cover that in a second.


<div class=”navigation”>

<div
class=”alignleft”><?php previous_post_link(’&laquo; %link’)
?></div>

<div
class=”alignright”><?php next_post_link(’%link &raquo;’)
?></div>

</div>

Here the template is laying out some basic navigation that allows the user to move between blog posts. The previous_post_link() function places a <a href=”..”> tag that if clicked will navigate the user to the previous post in the blog. The next_post_link() is very similar.

<div
class=”entry”>

<?php the_content(’<p
class=”serif”>Read the rest of this entry &raquo;</p>’);
?>

This code displays the actual post content (the content that you created under the “Writing” tab in the admin interface). The the_content(); function displays the HTML for the current “post” within “The Loop”. The argument within the function “…Read the rest of this entry…” is text that will be displayed in a <a href></a> tag at the end of the content if the content spans more than one page.

So how do I add some author information and maybe date of the post to this?
It’s easy! There’s a lot of information stored with each post that is accessible within “The Loop”. To see a list of all the functions you can use to get at this information visit this documentation page: http://codex.wordpress.org/Template_Tags. There you’ll see all the template functions that are available to you. So to get the author of the post we’d just call the_author();. Of course we’d want to put some HTML formating around it so we might do:


<p>This post was written by <?php
the_author(); ?></p>

Now to put the date the post was written we could put:

<?php the_date(’Y-m-d’,
‘<h2>Published On ‘, ‘</h2>’); ?>

 
There are tons of stuff you can do with posts so check out: http://codex.wordpress.org/Template_Tags and get started.



Tutorial Pages:
» Introduction To WordPress
» WordPress Themes
» Structure Of A WordPress Theme
» Making Your New Theme
» Modifying The Header
» Blog / Post Templates
» The Post Loop
» Page Templates
» Sidebars
» Meta Data / Custom Fields For Page Customization


Originally posted on Makebeta

 | Bookmark
Related Tutorials:
» Setting Up Subversion for Development on Windows
» Stylize Your Digg Count
» Installing Apache on Windows
» Ecommerce Imagery: Persuading with Pictures
» Customizable Websites - The Definitive Guide
» 7 Usability Guidelines for Websites on Mobile Devices

Advertise with Us!


Tutorials Scripts Web Hosting Developer Manuals
Resources