0

Creating a WordPress Theme (Part 5): Pages and Posts

In this part of the series we’re going to create the templates used for pages and posts. The page template is very simple because it only has the basic structure of our design. The post template has more details, which makes it more complex. In order to complete the post page, we’re also going to do the comments template.

The current file with the current theme can be downloaded here.

Introduction

We start this part of the series with our theme partially done. We have already created the design, started with the CSS and coded most of our home page. Now we’re going to code the templates for pages and single posts. We want both templates to look like our home page, so it’s the same structure we’ve already seen.

At the end of this post you can find the previous parts of the series and catch up with the development.

Pages

If you create a page and check it with our current page template, this is what you’re going to see:

Single page before corrections

Single page before corrections

We’re going to fix this by updating the page template. As we used the Default theme to build our theme, we’re just going to update the PHP file. Most of the needed CSS is already defined. The images aren’t styled yet, but we’re going to do it later, for the single posts template.

page.php

  1. Open the page.php file.
  2. Update the package information: replace @subpackage Default_Theme with @subpackage MyTheme_Theme.
  3. Now replace all occurrences of ‘kubrick’ with ‘mytheme’.
  4. Let’s do the same we did for our home page and replace the <div id=”content”> with the 2 DIV’s that will define our structure:
    <div id="main" class="container_12 box-shadow">
        <div id="content" class="grid_8" role="main">
    
  5. Remove the call to the wp_link_pages() function. This function is used to split the page in different pages using the “Page-Link” tag (<!–nextpage–>).
  6. Now just close the DIV created in step 4, right after the get_sidebar() function, and add a DIV with “clear” class after the function call.

Quite simple. The final code for the page.php file is the following:

<?php
/**
 * @package WordPress
 * @subpackage MyTheme_Theme
 */

get_header(); ?>
<div id="main" class="container_12 box-shadow">
	<div id="content" class="grid_8" role="main">

		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p class="serif">' . __('Read the rest of this page &raquo;', 'mytheme') . '</p>'); ?>

			</div>
		</div>
		<?php endwhile; endif; ?>
	<?php edit_post_link(__('Edit this entry.', 'mytheme'), '<p>', '</p>'); ?>

	<?php comments_template(); ?>

	</div>

<?php get_sidebar(); ?>
    <div class="clear"></div>
</div>

<?php get_footer(); ?>

With this little update, this is the result:

Single page template

Single page template

Posts

Before we start with the coding of the single post display we can see something similar to what we had for the pages:

Single post before changes

Single post before changes

Once again the problem is that we haven’t added the 960.css classes. So let’s start with the PHP and do this. We’ll continue with some changes in the CSS.

single.php

  1. Change the package information to fit our theme name.
  2. Update the “text domain” replacing all occurrences of ‘kubrick’ with ‘mytheme’.
  3. Replace the <div id=”content”> with 2 DIV’s with the 960.css classes:
    <div id="main" class="container_12 box-shadow">
        <div id="content" class="grid_8" role="main">
    
  4. Before we call the function the_content() add a call to the post thumbnail function.

    <?php
    if ( has_post_thumbnail() ) {
    the_post_thumbnail();
    }

    the_content(); ?>

  5. Now we’re going to add a facebook Like button. So, add the following code after you call the function the_content():
                    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light"
                            scrolling="no"
                            frameborder="0"
                            allowTransparency="true"
                            class="facebooklike"></iframe>
    
  6. Right after the functions wp_link_pages() and the_tags() we have the post metadata. Move it outside the <div class=”entry”>, after the </div> that closes the entry content DIV. Also remove the class from the metadata paragraph because we already used this class in the home page.
  7. Before we call the get_footer() function, add the sidebar and a clear with the following code:
    <?php get_sidebar(); ?>
        <div class="clear"></div>
    </div>
    

The complete code of the single.php file is this:

<?php
/**
 * @package WordPress
 * @subpackage MyTheme_Theme
 */

get_header();
?>
<div id="main" class="container_12 box-shadow">
    <div id="content" class="grid_8" role="main">

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

		<div class="navigation">
			<div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
			<div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
		</div>

		<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
			<h2><?php the_title(); ?></h2>

			<div class="entry">
                <?php
                    if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    }

                    the_content(); ?>

                <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light"
                        scrolling="no"
                        frameborder="0"
                        allowTransparency="true"
                        class="facebooklike"></iframe>

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

			</div>
				<p>
					<small>
						<?php /* This is commented, because it requires a little adjusting sometimes.
							You'll need to download this plugin, and follow the instructions:
							http://binarybonsai.com/wordpress/time-since/ */
							/* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); $time_since = sprintf(__('%s ago', 'mytheme'), time_since($entry_datetime)); */ ?>
						<?php printf(__('This entry was posted %1$s on %2$s at %3$s and is filed under %4$s.', 'mytheme'), $time_since, get_the_time(__('l, F jS, Y', 'mytheme')), get_the_time(), get_the_category_list(', ')); ?>
						<?php printf(__("You can follow any responses to this entry through the <a href='%s'>RSS 2.0</a> feed.", "mytheme"), get_post_comments_feed_link()); ?>

						<?php if ( comments_open() && pings_open() ) {
							// Both Comments and Pings are open ?>
							<?php printf(__('You can <a href="#respond">leave a response</a>, or <a href="%s" rel="trackback">trackback</a> from your own site.', 'mytheme'), trackback_url(false)); ?>

						<?php } elseif ( !comments_open() && pings_open() ) {
							// Only Pings are Open ?>
							<?php printf(__('Responses are currently closed, but you can <a href="%s" rel="trackback">trackback</a> from your own site.', 'mytheme'), trackback_url(false)); ?>

						<?php } elseif ( comments_open() && !pings_open() ) {
							// Comments are open, Pings are not ?>
							<?php _e('You can skip to the end and leave a response. Pinging is currently not allowed.', 'mytheme'); ?>

						<?php } elseif ( !comments_open() && !pings_open() ) {
							// Neither Comments, nor Pings are open ?>
							<?php _e('Both comments and pings are currently closed.', 'mytheme'); ?>

						<?php } edit_post_link(__('Edit this entry', 'mytheme'),'','.'); ?>

					</small>
				</p>
		</div>

	<?php comments_template(); ?>

	<?php endwhile; else: ?>

		<p><?php _e('Sorry, no posts matched your criteria.', 'mytheme'); ?></p>

<?php endif; ?>

	</div>
    <?php get_sidebar(); ?>
    <div class="clear"></div>
</div>

<?php get_footer(); ?>

Now let’s go to the CSS.

style.css

  1. First we’ll define the .navigation class. We need some margin at the top and bottom.
    .navigation {
        overflow:hidden;
        margin-top: 10px;
        margin-bottom: 15px;
    }
  2. Next we’ll define the images with captions. Let’s align the text, add a gray border and a box-shadow (CSS3 property – only for modern browsers).
    .wp-caption {
        text-align: center;
        padding-top: 4px;
        margin: 10px auto;
        border: 1px solid #808080;
        -moz-box-shadow: 2px 2px 2px #555; /* for Firefox 3.5+ */
        -webkit-box-shadow: 2px 2px 2px #555; /* for Safari and Chrome */
    }
    
  3. Continue centering the image and defining the caption size.
    .wp-caption img {
        margin-left: auto;
        margin-right: auto;
        border:0;
    }
    .wp-caption p.wp-caption-text {
        font-size: 0.8em;
        padding-top: 5px;
        margin: 0;
    }
    
  4. Let’s finish it defining the size of the facebook Like IFRAME.
    .facebooklike {
        border:none;
        overflow:hidden;
        width:450px;
        height:40px;
    }

Comments

We’ve coded the single post template, but we still need to code the comments template in order to finish it.

comments.php

  1. First, replace all occurrences of ‘kubrick’ with ‘mytheme’.
  2. Then add the class “text-shadow” to the comments INPUT tag.

Few changes in the PHP file, but a lot more in the CSS file.

style.css

  1. Let’s start with the .nocomments class. We need to align the text and add some margin.
    .nocomments {
        text-align: center;
        margin: 10px;
        padding: 0;
    }
    
  2. Now we have to define the comment list. Add a dotted green border and remove the list style.
    .commentlist {
        padding: 0;
        text-align: justify;
    }
    .commentlist li {
        font-weight: bold;
        margin: 15px 0 0;
        padding: 5px 5px 10px 10px;
        list-style: none;
        border: 1px dotted #008800;
    }
    
  3. Float the avatar image to the right and add a gray border.
    .commentlist li .avatar {
        float: right;
        border: 1px solid #808080;
        padding: 2px;
        background: #d2d2d2;
    }
    
  4. Each comment have a class to indicate if it’s odd or even, so let’s define different background to each of them.
    .commentlist li.odd {
        background: #f6f6f6;
    }
    .commentlist li.even {
        background: #fff;
    }
    
  5. As we may have comment’s replys, we need to style lists inside lists.
    .commentlist li ul li {
        margin-right: -5px;
        margin-left: -15px;
    }
    .commentlist li.depth-2, .commentlist li.depth-3, .commentlist li.depth-4, .commentlist li.depth-5 {
        background: transparent;
    }
    .commentlist li.parent {
        padding-bottom: 0;
    }
    
  6. Now we need to style the comment’s paragraphs and the comment’s metadata::
    .commentlist p {
        font-weight: normal;
        line-height: 1.5em;
        margin: 10px 5px 10px 0;
    }
    .commentmetadata {
        margin: 5px 0;
    }
    
  7. We’ll finish by styling the comment’s form.
    #commentform {
        margin: 5px 10px 0 0;
    }
    #commentform input {
        width: 170px;
        padding: 2px;
        margin: 5px 5px 1px 0;
    }
    #commentform textarea {
        width: 100%;
        padding: 2px;
    }
    #commentform #submit {
        margin: 0 0 5px auto;
        float: right;
        background: #006600;
        border:1px solid #008800;
        color:#fff;
        font-weight: bold;
        cursor: pointer;
    }
    #commentform p {
        margin: 5px 0;
    }
    #respond:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    

With the last changes we have also finished our single post page. Here is the result:

Single post

Single post

Conclusion

With this post we have finished the main templates of our theme. Very simple changes, similar to what we’ve done for our home page. The theme is almost 100% functional. There are some missing templates, like links.php, archive.php and archives.php, that are easily updated doing the similar changes as we’ve done for the page.php file. For this reason, I’m not going to show these templates here. It’s just a repetition of what we’ve done.

Download our theme with the changes we made in this post here (76 Kb).

Next week I plan to finish these series about the WordPress theme creation. We’ll see the footer, some additional styling and the widgets I use. Thanks for the visit and don’t forget to come back for the last part.

Other Posts from the Series
Creating a WordPress Theme (Part 1): Photoshop
Creating a WordPress Theme (Part 2): Introduction
Creating a WordPress Theme (Part 3): Header
Creating a WordPress Theme (Part 4): Home Page

Share Button

Oscar Dias

I work with software development since 2003 and I've used different programming languages. Currently I work with PHP in my own company Softerize.

Leave a Reply

Your email address will not be published. Required fields are marked *