This tutorial will teach you how to separate your WordPress comments and trackbacks in WordPress v3.3 and above using some simple jQuery tabs to display the content separately. I have used this technique on several WordPress installs that use the WordPress internal comment system including here on WPShock before I recently changed the sites comment system to use lifefyre.
There are many outdated How To Separate Comments & Trackbacks tutorials on the Internet relating to WordPress usually based upon the old way wordpress used to handle the comments.php. Several months ago I wanted to separate my comments and trackbacks on my personal blog and figured out this technique to achieve that goal with the latest version of WordPress.
You will require around 20mins along with some knowledge of CSS to complete this tutorial and style you comments to match your own themes layout, as always I recommend using a good quality code editor to modify any css or php files. Your theme will also be required to load jQuery in it’s header if your current theme does not already load jQuery into its header follow the instructions in this tutorial first to Load jQuery From Google Libraries CDN With Local jQuery Fallback.
Firstly make a backup of your themes current comments.php file and keep it safe before starting this tutorial as we will be replacing the code within that file. A quick way to do this for testing is simply rename the comments.php file to comments.php.bak.
Step 1: The comments.php file
Now you will want to create a new blank comments.php file in your theme, copy and paste the code snippet below into it and save the file. The code snippet below is commented to help you understand what it’s parts are.
<?php
/* Loop throught comments to count the totals */
foreach ($comments as $comment) {
if (get_comment_type() != "comment") { $numPingBacks++; }
else { $numComments++; }
}
?>
<div class="tabs"><!-- tab container start -->
<ul class="tabNavigation"><!-- tab navigation start -->
<li><a href="#comments" rel="nofollow"><?php _e($numComments); ?> <?php _e('Comments', 'wpshock'); ?></a></li>
<li>&nbsp;|&nbsp;
<li><a href="#pingbacks" rel="nofollow"><?php _e($numPingBacks); ?> <?php _e('Trackbacks', 'wpshock'); ?></a></li>
</ul><!-- tab navigation end -->
<ol class="commentlist" id="comments"><!-- comments display section start -->
<?php wp_list_comments(array('style' => 'ol', 'type' => 'comment', 'avatar_size' => 40,)); ?>
</ol><!-- comments display section end -->
<ol class="commentlist" id="pingbacks"><!-- pingbacks / trackbacks display section start -->
<?php wp_list_comments(array('style' => 'ol', 'type' => 'pingback')); ?>
</ol><!-- pingbacks / trackbacks display section end -->
</div><!-- tab container end -->
<!-- comment pagination start -->
<?php paginate_comments_links(); ?>
<!-- comment pagination end -->
<!-- comment reply form start -->
<?php comment_form(); ?>
<!-- comment reply form end -->
Step 2: Check Page and Post Files For Correct Comments Call
Next take a minute to check your page.php and single.php to confirm that the both contain the code below within them. The code snippet below is required to display the comments.php template on post pages etc. 99% of themes will / should have have this code present already, if the code is already present no further action is required on this part.
<?php comments_template(); ?>
Step 3: Using jQuery To Switch Between Comment & TrackBack Display
Next we will use some simple jQuery to change between the comments and trackback sections when the navigation link is clicked.
Create a folder in your theme called /js if it does not already contain on with this name.
Create a file titled jquery.comment.tab.js and place it in the /js folder you created.
Now copy and paste the code block below into the jquery.comment.tab.js file and save it.
$(function () {
var tabContainers = $('div.tabs > ol');
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
Step 4: Adding The jQuery Comment Script To WordPress
Copy and paste this code block below to your themes functions.php and save the file. This function will load the jquery.comment.tab.js so make sue your path the the file is correct if you have changed it’s location.
//--------- [ Comment / Pingback Tabs JQuery Plugin Javascript ] -------------//
function jquery_comment_js() {
wp_enqueue_script('comments', get_template_directory_uri() . '/js/jquery.comment.tab.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'jquery_comment_js');
Step 5: Styling With CSS
Finally you will want to style your comments and tabs to suit your themes design. The design I used is very simple and light mostly with text tabs etc. You can easily restyle the tab area and comments to be more advanced by adding some simple CSS, you will also probably need to edit the basic CSS below to fit your themes design if your going to use it as your starting point.
/*------------------------------- [ Comments ] -------------------------------*/
.tabNavigation {
font-weight:700;
border:1px solid #e5e5e5;
padding:10px 10px 10px 15px;
margin-bottom:10px;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}
.tabNavigation li {
display:inline;
font-size:24px;
padding:0;
margin:0;
}
h3#comments {
font-size:22px;
padding:0;
margin:0 0 10px 0;
}
.commentlist {
padding:0px;
margin:0px;
width:100%;
list-style:none;
}
.commentlist ol {
list-style:none;
}
.comment {
border:1px solid #e5e5e5;
padding:10px;
margin-bottom:10px;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}
div ul.children .comment {
margin-top:10px;
}
.comment.even{
background:white;
}
.comment.odd {
background:#fcfcfa;
}
.comment.bypostauthor {
background:#fcffff;
}
.comment-author img {
background:white;
float:left;
padding:3px;
border:1px solid #e5e5e5;
margin-right:10px;
width:40px;
height:40px;
}
#respond code {
overflow:hidden;
display:block;
width:580px;
padding:10px;
margin:10px 0 10px 0;
border:1px solid #e2e1e1;
background-color:#f4f4f4;
font-size:12px;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}
.reply {
}
ol.children {
margin-top:20px;
}
.reply a {
font-weight:900;
padding:5px 10px 5px 10px;
background:#edeeef;
border:1px solid #cbcbcb;
text-decoration:none;
color:#515151;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}
.reply a:hover {
padding:5px 10px 5px 10px;
background:#093f6c;
border:1px solid #2a2a2a;
text-decoration:none;
color:white;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}
#respond {
background:white;
border:1px solid #e5e5e5;
color:#515151;
padding:10px;
margin:10px 0 30px 0;
overflow:hidden;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}
#respond h3 {
font-weight:700;
font-size:24px;
padding:0;
margin:0;
}
#respond input {
float:left;
margin-right:10px;
padding:6px;
}
#respond label {
position:relative;
top:5px;
}
span.required {
position:relative;
top:8px;
}
#respond textarea {
margin-top:10px;
min-width:96%;
max-width:96%;
}
#respond .form-allowed-tags {
font-size:12px;
color:#9d9d9d;
}
#respond input#submit {
font-weight:900;
margin-top:10px;
border:none;
cursor:pointer;
padding:10px;
background:#edeeef;
border:1px solid #cbcbcb;
text-decoration:none;
color:#515151;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}
#respond input#submit:hover {
margin-top:10px;
border:none;
padding:10px;
background:#093f6c;
border:1px solid #2a2a2a;
text-decoration:none;
color:white;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}
input#recaptcha_response_field {
padding:0;
}
.pingback {
border:1px solid #e5e5e5;
background:#fcfde5;
padding:10px;
margin-bottom:10px;
border-radius: 3px; /* Firefox 4; browsers with CSS3 support */
-moz-border-radius: 3px; /* Firefox up to version 3.6 */
-webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */
}
.pingback .reply, .pingback p {display:none;}
As you will notice since WordPress tidied up the comments.php files of old there is far less code used in this technique and it much cleaner overall. Also the new way of outputting the WordPress comments it’s much easier to make you comments section look exactly how you want it to.
I hope you found this short tutorial useful; if you did please consider sharing it on your social accounts and as always any improvments or questions you may have please leave a comment letting me know.
Leave a Reply
You must be logged in to post a comment.