You are here: Home » Blog Design » WordPress Threaded Comments – How to Install Them on Your Theme [A Guide for Dummies]

WordPress Threaded Comments – How to Install Them on Your Theme [A Guide for Dummies]

So you’ve got an archaic WordPress theme and you would like to install threaded comments on it?

You’ve come to the right place.

Here’s what you will need to complete this guide:

• Absolutely no knowledge of HTML/CSS or PHP
• An IQ over 55 (borderline retarded)
• A computer and an old WordPress theme that needs comments threaded

Let’s get started.

Step 1: Backing Up Your Current Comment.php File

Go to Editor –> Themes –> click on Comments (comment.php) in the right-hand sidebar. Copy and paste everything inside of comment.php into a text file and save it to your hard disc. If you completely screw up following this incredibly easy, step-by-step tutorial, you will have a backup of your old working comment.php file.

Step 2: Copy and Pasting the Default’s Theme Comment.php

Go to Editor –> Themes –> click on Comments (comment.php) in the right-hand sidebar. Highlight everything and delete it (there is no need to click Update after you have done that). Then copy and paste this code into the window and click Update:

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
// Do not delete these lines
	if (!empty($_SERVER['SCRIPT_FILENAME']) &amp;&amp; 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');
	if ( post_password_required() ) { ?>
		<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
	<?php
		return;
	}
?>
<!-- You can start editing here. -->
<?php if ( have_comments() ) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
	<ol class="commentlist">
	<?php wp_list_comments(); ?>
	</ol>
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 <?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. -->
		<p class="nocomments">Comments are closed.</p>
	<?php endif; ?>
<?php endif; ?>
<?php if ( comments_open() ) : ?>
<div id="respond">
<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>
<div class="cancel-comment-reply">
	<small><?php cancel_comment_reply_link(); ?></small>
</div>
<?php if ( get_option('comment_registration') &amp;&amp; !is_user_logged_in() ) : ?>
<p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( is_user_logged_in() ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
<p><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
</div>
<?php endif; // if you delete this the sky will fall on your head ?>

Note: With out a doubt, the absolute fastest and easiest way to install threaded comments on a theme is to use re-use the code inside the default theme’s comment.php. If, for some reason, you would like to take the long way around and amend an already existing comment.php to support threaded comments, you will need to re-do the loop and add the proper functions. In my opinion, there should be no reason why you would have to take the long way around unless you really want to understand how the loop works and be familiar with the functions.

Step 3: Enabling WordPress to Recognize Threaded Comments

Although you haven’t styled your threaded comments yet, you now have threaded comments installed. You need to let WordPress know that your theme has the threaded comments feature and that you would like WordPress to display them. Go to Settings –> Discussion. Check the box beside “enable threaded (nested) comments” and choose how many levels you would like threaded comments to go. For example, if I chose “3,” I would be able to reply to a comment that was made in reply to a normal comment (one that was not in reply to any other comment). With a level of 3 however, I would not be able to reply to a reply of a reply.

Step 4: Styling Threaded Comments

Right now, threaded comments are installed but they are not fitted aesthetically to your theme. You may want to change the indents or place a border and background on your threaded comments. To do this there are some simple changes you need to make to style.css (accessed through Appearence –> Editor –> Style.css). In Style.css, add the following at the bottom:

li.depth-2 {
   background: 1px solid #000;
   background-color: #131640;
   margin-left: 20px;
} 

Here is how the threaded comment will look on the Dirty Blue Theme, using the above CSS code:

You probably will need to change the color and border property (or remove it altogether) to fit your theme. You may need to change the padding and margin properties to suite your theme. As you can tell by the example above, the padding and margin need to be altered and the color is just not right.

To style threaded comments with a depth level of 3 (you must have “3 levels deep” set in Settings –> Discussion) you will need to create a CSS class called “li.depth-3″ and style appropriately. Typically the only thing you will need to change on the next level of threaded comments is the indent, which is changed by doubling the margin property (in the above example, “margin-left: 20px” would be changed to “margin-left: 40px“).

Step 5 (optional): Installing the Reply Form Javascript

To install the neat little Javascript that moves the comment reply box just below the comment being replied to (as opposed to being taken to where the reply form is at the bottom of the comment template), just copy and paste the following line of code into header.php, just before php wp_head():

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

That’s it! You know should be able to enable threaded comments on your theme and change their appearance. If you have any difficulty following this guide, don’t hesitate to leave a comment below and I will help you out.

Tags: setting up, themes, wordpress help

You might like: