WordPress Theme Development From Scratch Part 4 : Single Pos...

WordPress Theme Development From Scratch Part 4 : Single Post, Page and Comments

Category: WordPress   Updated by Ryan Dhungel



In this part of WordPress theme development from scratch series, We will be working on single post and single page and comments. So far we learned how to create blog posts from within WordPress admin and display in the front page by looping through each of them. That was cool but when we click on each blog title we see a page that looks exactely like the index page because it is using index.php. But we want to make single posts look different. That is what we will be doing in this part.

I hope you are following me from part 3. If you haven't gone through previous tutorials, I recommend you to start from part 1. That way you will get full understanding of what we are doing here. It is always a good idea to get comfortable with the basics, that way you can move ahead with confidence and ease.

Requirement


Goals

  • Create single post
  • Create single page
  • Enable comments functionality


Create single.php

The first thing we need to do is create a file called single.php. Go inside your theme folder and create single.php. This will be used for blog post. Each time we click on the blog title or read more etc to see the entire blog we will be taken to this page. Now if you reload the page, you will no longer see the blog post, all you see is white screen. As soon as you create single.php, WordPress loads this page by default for your blog post. WordPress is smart!

Let's copy all the code from our index.php and paste it into single.php. In Case you are a bit lost, Let me show you what we have in our index.php by now.

This is the code we have in index.php at the moment


<?php get_header(); ?>

<div class="row">

  <div class="col-sm-8 blog-main">
    <?php if(have_posts()) : ?>
      <?php while(have_posts()) : the_post(); ?>
        <div class="blog-post">
        <h2 class="blog-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <p class="blog-post-meta"><?php the_time('F j, Y g:i a'); ?> by <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')) ?>"><?php the_author(); ?></a></p>
            <?php if(has_post_thumbnail()) : ?>
              <div class="post-thumb">
                <?php the_post_thumbnail(); ?>
              </div>
            <?php endif; ?>
          <?php the_excerpt(); ?>
        </div><!-- /.blog-post -->
      <?php endwhile; ?>
    <?php else : ?>
      <?php __('Sorry, Posts not found!') ?>
    <?php endif; ?>
    <nav>
      <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
      </ul>
    </nav>

  </div><!-- /.blog-main -->

  <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
    <div class="sidebar-module sidebar-module-inset">
      <h4>About</h4>
      <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
    <div class="sidebar-module">
      <h4>Archives</h4>
      <ol class="list-unstyled">
        <li><a href="#">March 2014</a></li>
        <li><a href="#">February 2014</a></li>
        <li><a href="#">January 2014</a></li>
        <li><a href="#">December 2013</a></li>
        <li><a href="#">November 2013</a></li>
        <li><a href="#">October 2013</a></li>
        <li><a href="#">September 2013</a></li>
        <li><a href="#">August 2013</a></li>
        <li><a href="#">July 2013</a></li>
        <li><a href="#">June 2013</a></li>
        <li><a href="#">May 2013</a></li>
        <li><a href="#">April 2013</a></li>
      </ol>
    </div>
    <div class="sidebar-module">
      <h4>Elsewhere</h4>
      <ol class="list-unstyled">
        <li><a href="#">GitHub</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Facebook</a></li>
      </ol>
    </div>
  </div><!-- /.blog-sidebar -->

</div><!-- /.row -->

</div><!-- /.container -->

<?php get_footer(); ?>


If you copy and paste the above code from index.php page to single.php and reload the page. you will see that your blog post is back.

Remove the link from blog title


We still have the title link to our blog title. That is not necessary in single page, so let's remove that. Find the code below.

<h2 class="blog-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

Replace with the code below:

<h2 class="blog-post-title"><?php the_title(); ?></h2>


Dispaly full blog content

You must have noticed that our single post shows only excerpt, not the full content. Lets display the content instead of excerpt.

Replace <?php the_excerpt(); ?> with the code below:

<?php the_content(); ?>


Now if you reload the page, you will see that the blog has the full content, not only excerpt

We are doing things slow here so that it is completly understood and sink well into our brain so that we can create WordPress themes like a pro in coming days. How does that sound?


Comments Functionality

What do you think about having a comments section right below the blog post? Cool right? That's what everyone's doing. People come to read your blog and leave their comments. And it is as easy as it sounds. You will love it. 

Put the code below right under <?php the_content(); ?> This will enable the comments function to our theme. It's really easy.

<?php comments_template(); ?>


If you reload the page, you can see the comments functionality is working great.

Create comments.php

Comments function is working good however you might want more control over it's appearance and functionality. For that we need to create a new file called comments.php

Go to your theme folder and create a folder called comments.php

In comments.php, create a div and give it a class name called comments so that we can style it later. Also create a heading and call it Comments. See the code below:

<div class="comments">
    <h2>Comments</h2>
</div>


Comments function and Comments Form

Below we are calling two functions wp-list-comments and comment-form function. First we are calling wp-list-comments followed by the arguments array for the comment form. Then we are calling for comment-form function followed by the arrays of arguments that let us change the title of the send button, change the title of the reply section etc

Copy the code below and paste it right after the <h2>Comments</h2>. I copied the code for the wp-list-comments function from WordPress functions reference page and also copied the code for comment-form from this WordPress functions reference page.

<?php $args = array(
        'walker'            => null,
        'max_depth'         => '',
        'style'             => 'ul',
        'callback'          => null,
        'end-callback'      => null,
        'type'              => 'all',
        'reply_text'        => 'Reply',
        'page'              => '',
        'per_page'          => '',
        'avatar_size'       => 32,
        'reverse_top_level' => null,
        'reverse_children'  => '',
        'format'            => 'html5', // or 'xhtml' if no 'HTML5' theme support
        'short_ping'        => false,   // @since 3.6
        'echo'              => true     // boolean, default is true
    );
?>
<?php wp_list_comments( $args, $comments );

    $comments_args = array(
        // change the title of send button 
        'label_submit'=>'Post',
        // change the title of the reply section
        'title_reply'=>'Write a Reply or Comment',
        // remove "Text or HTML to be displayed after the set of comment fields"
        'comment_notes_after' => '',
        // redefine your own textarea (the comment body)
        'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><br /><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
    );

    comment_form($comments_args);
?>


Now save it and reload the page. That looks similar right?  You can change the heading, button text etc in comments.php. The only thing left to do is style it. Since we have already wrapped it in a div with a class name comments Let's go ahead and do some styling.

Styling the comment section

So far we have successfully implemented comments functionality to our theme. We also put functions in comments.php and got a better understanding of how the whole thing works. Let's add some styling to it so that it looks good too.

Feel free to copy and modify the css below. Put it in style.css.

/*
comments section
*/

.comments{
    border: 1px solid #ccc;
    padding: 10px;
}

.comments h3, .comments h2{
    color: #333;
    padding: 5px;
}

.comment-body{
    border: 1px solid #ccc;
    padding: 20px 10px;
}
#comment-2{
    list-style-type: none;
    background: #fff;
}

.comments-meta img{
    float: left;
}

.comment-reply-link{
    background: #f4f4f4;
    color: #666;
    display: inline-block;
    padding: 10px 15px;
}

.comment-form input{
    padding: 5px 20px;
    border: 1px solid #428bca;
    background: #428bca;
    color: #fff;
}

.comment-form input:hover{
    background: #fff;
    color: #428bca;
}

.comment-form textarea{
    width: 100%;
    height: 200px;
}


Ok, Now we have single post page with comments working great. Let's move on to the single page

Create page.php

It is time for us to create page.php inside our theme folder. Go ahead and create page.php and save. Reload the page and go to one of the pages you created earlier. All you see is white right? For the moment let's copy all the code from single.php and paste inside page.php. Reload the page to see the same layout as the others.

Since this template will be used for pages, we want to make it look different. We will do further customization later with full width image background and call to action buttons etc but for the moment let's make some small changes to it so that the page is identical.

Let's remove the meta content, comments and featured image from the single.php. This is all the code we have left in page.php now.

<?php get_header(); ?>

<div class="row">

  <div class="col-sm-8 blog-main">
    <?php if(have_posts()) : ?>
      <?php while(have_posts()) : the_post(); ?>
        <div class="blog-post">
        <h2 class="blog-post-title"><?php the_title(); ?></h2>
          <?php the_content(); ?>
        </div><!-- /.blog-post -->
      <?php endwhile; ?>
    <?php else : ?>
      <?php __('Sorry, Page not found!') ?>
    <?php endif; ?>
    <nav>
      <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
      </ul>
    </nav>

  </div><!-- /.blog-main -->

  <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
    <div class="sidebar-module sidebar-module-inset">
      <h4>About</h4>
      <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
    <div class="sidebar-module">
      <h4>Archives</h4>
      <ol class="list-unstyled">
        <li><a href="#">March 2014</a></li>
        <li><a href="#">February 2014</a></li>
        <li><a href="#">January 2014</a></li>
        <li><a href="#">December 2013</a></li>
        <li><a href="#">November 2013</a></li>
        <li><a href="#">October 2013</a></li>
        <li><a href="#">September 2013</a></li>
        <li><a href="#">August 2013</a></li>
        <li><a href="#">July 2013</a></li>
        <li><a href="#">June 2013</a></li>
        <li><a href="#">May 2013</a></li>
        <li><a href="#">April 2013</a></li>
      </ol>
    </div>
    <div class="sidebar-module">
      <h4>Elsewhere</h4>
      <ol class="list-unstyled">
        <li><a href="#">GitHub</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Facebook</a></li>
      </ol>
    </div>
  </div><!-- /.blog-sidebar -->

</div><!-- /.row -->

</div><!-- /.container -->

<?php get_footer(); ?>


Now you can reload the page and see that we have removed the meta content with the date and author info from the page and also the featured image is gone.

In the next chapter, we will be adding widgets to the sidbar.

Conclusion

In this tutorial, we understood how WordPress works with single post and pages. We not only learned to create and implement single post and page but also learned how to enable comments system too. By now you must be feeling comfortable to work with WordPress. The more we know the more we get comfortable working with it and become an awesome developer.

In the next part, We will be working with widgets that will eventually replace the static text sidebar that we currently have. I hope you are working along with me. Learning the basics is the most important thing, if you know the basics well then you will be able to move on your own and create something amazing in future.

So keep up the good work and leave your comments below. For any development related issues, you can use our forum.

Download source code from github 



Back to articles