Part 8: Building Comments into your Template

We’re going to be introducing new functions into the fray that generate our comments form, no surprise there I’m sure. It may even be helpful to think of comments as content, because we need to run another Loop of sorts to have them display.

Prepare Single.php

To make sure we can see the fruits of our labor, we need to instruct WordPress to look for comments.php, and just like most all things in WordPress, it’s done with a function, though we also need to be mindful to ready the theme, so what I’m going to do is

1. Create a new section with a class of comments after the tags
2. Add the WordPress tag comments_template
3. Close the new section

<section class="comments">
	<?php comments_template(); ?>
</section>

What does comments_template actually do?

Simply, it looks for a file named comments.php in the root theme directory. However, if you don’t have this, it will still load up some very barebones comments as below.

Image may be NSFW.
Clik here to view.

We’re going to roll our own, so create a file named comments.php, and then move to the next section.

Displaying Comments

As mentioned earlier, displaying the comments is done through a comments loop, using simple WordPress functions. Here’s a super simple comment loop, be sure to write this into comments.php

<?php if ( have_comments() ) : ?>
		<?php wp_list_comments(); ?>
	<?php else : // this is displayed if there are no comments so far ?>
	<?php if ( comments_open() ) : ?>
		<!-- If comments are open, but there are no comments. -->
	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
	<?php endif; ?>
<?php endif; ?>

Here’s whats’s happening there:

• have_comments: checks for the presence of comments, and if it finds them, wp_list_comments is executed
• wp_list_comments: will display the comments as part of an unordered list
• comments_open: checks to see if comments are open or closed, if the comments are closed, it will stop the comment form appearing

More about wp_list_comments

In it’s current, default form, it will display the comments with each item belonging to an unordered list. If you prefer it to display otherwise, wp_list_comments is one such function that can take arguments. If you wanted it, say, in a div, you could use it as follows.

<?php wp_list_comments(array('style' => 'div')); ?>

We’re going to roll with the stock format for now.

Titling the Comments

Right now, we have comments displaying in a mostly, orderly manner, but they just trail on after the content, there’s no clear distinction. Let’s add a title to change that, but instead of a boring “Comments !” or something, we’re going to add the comment count via comments_number. Note that we’re providing arguments to this to tell it what to display in the event of zero, one, and multiple comments respectively.

<h3><?php comments_number('No Comments', 'One Comment', '% Comments' );?> on "<?php the_title(); ?>"</h3>

Add this above the comment loop, and carry on.

Image may be NSFW.
Clik here to view.

The Comment Form

I’m yet to meet someone who has said “I love HTML forms!” without sarcasm. It’s probably the reason why we have services such as Formstack and Wufoo.

I live and breathe HTML Forms

- Nobody, ever.

And that’s a good thing, because WordPress will, by default, load up a basic comments form when the function comment_form is used. In time, though, it can be wise to build your own, customized, comment form, even if just for the practice.

Here’s the presentation.

Image may be NSFW.
Clik here to view.

Styling the comments

WordPress also have the ability to nest comments when someone replies to another person, and you can set comments to nest up to 10 layers deep. Here’s how it looks with the maximum nesting set to three.

Image may be NSFW.
Clik here to view.

WordPress applies lots of classes to this content, so we’re not going to spend too much time on this before moving on, just a slight tidy up with some css, and we’ll be using the aforementioned CSS to do so.

.comments {
	padding: 1em;
}
.comment{
	list-style-type: none
}
.comment-meta {
	font-size: .8em;
}
.children {
	border-left: 1px solid #ddd;
}
.comment-reply-link {
	float: right;
	font-size: .8em;	
}

Image may be NSFW.
Clik here to view.

It’s added a small border to emphasize the nesting, removed the list style, reduced the meta font size, and moved the reply link off to the right.

Styling the comments form

The default form is pretty ugly, it works, but it needs some attention before we move on. The button needs to be in the style of the site, and the text area below the word comment, and I’m also after a quick-fix to hide the HTML tags allowed. here’s what I’ve put together for this.

.form-allowed-tags {
	display:none;
}

#submit {
	border-radius: 5px;
	background: #4095EC;
	color: white;
	border:0;
	min-width: 150px;
	min-height:1.5em;
}

#submit:hover{
	background: #1C5899;
}
#author, #url, #email, #comment {
	display:block;
	border:1px solid #ddd;
}

Image may be NSFW.
Clik here to view.

Comment Security

There’s two things that you probably don’t want people to do,

1. Directly loading comments.php, and
2. Viewing comments on a protected post.

How do we do this though? With a little PHP

<?php
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');

	if ( post_password_required() ) { ?>
		<p>This post is password protected. Enter the password to view comments.</p>
	<?php
		return;
	}
?>

It’s mostly straight forward to read this code, and I’ll be leaving it to you if you want to learn more about it.

Comment Pagination

To finish up adding comments to our theme, we need to add pagination. Like most things, it’s done with a function, paginate_comments_links. Please add this after the comments loop, and before the comment_template.

The final comments.php

<h3><?php comments_number('No Comments', 'One Comment', '% Comments' );?> on "<?php the_title(); ?>"</h3>

<?php if ( have_comments() ) : ?>
		<?php wp_list_comments(); ?>
	<?php else : // this is displayed if there are no comments so far ?>

	<?php if ( comments_open() ) : ?>
		<!-- If comments are open, but there are no comments. -->

	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		
	<?php endif; ?>

<?php endif; ?>

<?php paginate_comments_links() ?>

<?php comment_form(); ?>

What else can be done?

A lot, there’s truly so much that can be done with comments–this is a very raw approach. One of the biggest changes is using JavaScript to take the comment reply form to under the comment you’re replying to. Right now, it will just take you down to the form at the end of the page. You can create your own comment form from scratch, and in many cases, it’s probably best to do so. Once you have your own, or a basic template, you can likely use it in most of your products.

We’re going to cover this in the near future, rather than right now, as what we have now is 100% functional, and as such, it’s time to move on to the next part.

The post Part 8: Building Comments into your Template appeared first on YinPress.