WordPress Theme: Part 6

Now we’ll be working with page.php and single.php. This might seem daunting but it’s really not. The content of these pages is basically the same as what we did in index.php.


We’ll start with page.php, which should be pretty simple. Copy everything you’ve got in index.php and paste it into page.php. Now, remove the permalink (if you used one) and the post metadata. We don’t need the permalink because the page URL is the permalink. We don’t need the metadata because it’s just a page, but you may want to keep the link to edit the entry.

Also a quick thing to note here; the code we used at the beginning of the Loop:

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

Can be simplified to:

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

You won’t be needing a “Read the rest of this entry” link so after the title you can simply put <?php the_content(); ?> to display the content.

At the end of the page, but before the link to edit the entry, you should place the following code (and get rid of the post navigation we put in earlier).

<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

The reason we put this page navigation is in case you choose to break up your page into sections. I personally don’t use this, but it’s very useful. By inserting <!--nextpage--> into the HTML editor when editing a page, you create a break in that page, such that you need to click the next “page” to go to the next part.

You can change the parts in italics to change what appears before and after the page links. You can remove the paragraph and perhaps put it all in a div, and get rid of the Pages text.

Your page should look roughly like this:

<?php get_header(); ?>

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

   <h1><?php the_title(); ?></h1>
		<?php the_content(); ?>
			<?php wp_link_pages(array('before' =>
			'<p><strong>Pages:</strong> ', 'after' => '</p>',
			'next_or_number' => 'number')); ?>
   <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

<?php endwhile; ?>

<?php else : ?>
   <h1>Not found</h1>
   <p> Sorry, but the page you requested does not exist.</p>
   <?php get_search_form(); ?>

<?php endif; ?>

<?php get_footer(); ?>

Just before <?php endwhile; ?> we are going to insert the code for comments, in case you may enable comments on your pages.

<?php comments_template(); ?>

Now you can save this page.php and upload to your blocks theme folder.


Moving on to single.php, copy index.php and edit it in a similar fashion to page.php. You may want to keep the metadata and comment links, and the link to edit the entry. Keep in mind that single.php displays a full blog post and comments, located at the blog post’s permalink. For example, yoursite.com/blog/my-first-blog-post/ will display what you choose on this page as it is a post created in WordPress.

You might want to include tags as part of the metadata:

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

You might also want to include links for the previous/next posts before the title. These are the codes for the previous and next posts respectively:

<?php previous_post_link('%link', $link='&larr; %title') ?>
<?php next_post_link('%link', $link='%title &rarr; ') ?>

You can edit the parts in italic to display arrows or other symbols before the previous/next post titles. The %title text can be changed if you don’t wish for titles to be printed but “next” and “previous” instead, perhaps?

Using what we know, we are going to need <?php comments_template(); ?> in this document, because we would like to display comments and the comment form in our posts. Again, that will go just before <?php endwhile; ?>.

Now you can save this as single.php and upload to your blocks theme folder.