A couple of days ago I wrote a simple tutorial on how you can separate trackbacks from comments. This tutorial didnt do much with the presentation as it only displayed the trackbacks below the comments. In this article I’ll describe an easy way to create different tabs for comments and trackbacks. You see this tabbed layout being used in a lot of Wordpress themes lately as it is a clean way of presenting comments and trackbacks separately.
This how to assumes you have some basic knowledge on how to edit Wordpress theme files.
Loading up jQuery
Since version 2.7+ of Wordpress the necessary jQuery files come packaged with the installation of Wordpress. You do however need to load the scripts to be able to use it’s functionality. The right place to do this is between the head tags of your theme in header.php. We use the Wordpress function wp_enqueue_script() for this. Add the following lines of code between your <head></head> tags.
<?php
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-tabs');
?>
Add some custom script
Ok, with the right jQuery scripts loaded we are ready to add some custom javascript which initializes the tabs functionaliteit. The following lines of code initialize a set of tabs assigned to a CSS ID called tabs. Also add these lines of code between the <head></head> tags of your theme in header.php. A good place would be below the previous code edit for loading the jQuery scripts.
<script type="text/javascript">
jQuery(document).ready(function($){ $("#tabs").tabs(); });
</script>
Add styling for the tabs
Before actually adding the markup for the tabs we are first going to add the styling for these tabs so you can see the end result while testing your theme edits. These style classes are very basic, once everything is working it’s up to you to edit these styles so the tabs will blend in with your own theme. Add the following code at the bottom of stylesheet.css:
/* TABS FOR COMMENTS AND TRACKBACKS */
#tabs { margin: 0 0 8px 0; }
#tabs.ui-tabs .ui-tabs-hide { display: none; }
#tabs.ui-tabs #comments-tab, #tabs.ui-tabs #trackbacks-tab { border: 1px solid #666; background-color: #eee; padding: 4px; }
#tabs.ui-tabs ul { margin: 0 0 1px 0; padding: 0; }
#tabs.ui-tabs .ui-tabs-nav li { list-style-type: none; display: inline; width: auto; margin: 0 4px 0 0; padding: 0; }
#tabs.ui-tabs .ui-tabs-nav li a { background-color: #fff; border: 1px solid #666; padding: 4px 10px 4px 10px; }
#tabs.ui-tabs .ui-tabs-nav li a:hover { background-color: #eee; border-bottom: 1px solid #eee; }
#tabs.ui-tabs li.ui-tabs-selected a { background-color: #eee; border: 1px solid #666; border-bottom: 1px solid #eee; padding: 4px 10px 4px 10px; }
Separate comments from trackbacks in different tabs
With everything in place we can start editing the comments layout to get the end result we are after. But before digging in the actual theme files I’ll first show some basic markup on how the jQuery tabs are build up. Please try to understand the structure, it will help you modifying your own theme.
<div id="tabs">
<ul>
<li><a href="#tab-1"><span>Tab-1 Title</span></a></li>
<li><a href="#tab-2"><span>Tab-2 Title</span></a></li>
<li><a href="#tab-3"><span>Tab-3 Title</span></a></li>
</ul>
<div id="tab-1">
<p>The contents of tab-1 goes here</p>
</div>
<div id="tab-2">
<p>The contents of tab-2 goes here</p>
</div>
<div id="tab-3">
<p>The contents of tab-3 goes here</p>
</div>
</div>
Got that? Time to get down to business. The file we need to edit to separate the comments and trackbacks and display them in different tabs is comments.php. The contents of this file will be different for each theme so I cant give you the exact code edits. Instead I’ll be describing the steps in general terms using the default theme that comes with Wordpress 2.9.1. So don’t copy the code straight over but understand the edits and then apply the step to your own comments.php theme file.
Separate the trackbacks from comments
If you havent followed my previous tutorial on how to separate trackbacks from comments this would be the first thing to do. The rest of these steps assume you have separated trackbacks from comments and you now want them displayed in different tabs.
Add markup for tabs
I have shown you the default markup for using jQuery tabs above. We are going to use this code and apply it to your comments theme file. If you have separated the trackbacks from the comments as mentioned in my previous tutorial you will have similiar looking code as the code below in your comments.php. The first ordered list displays comments and the second displays the trackbacks if they are available.
<?php if ( have_comments() ) : ?>
<?php if ( ! empty($comments_by_type['comment']) ) : ?>
<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('type=comment'); ?>
</ol>
<?php endif; ?>
<?php if ( ! empty($comments_by_type['pings']) ) : ?>
<h3>Trackbacks / pingbacks</h3>
<ol class="trackbacklist">
<?php wp_list_comments('type=pings'); ?>
</ol>
<?php endif; ?>
<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 ?>
In the following code I have added the markup for displaying the ordered lists for comments and trackbacks in different tabs. Compare the two pieces of code to see what changes have been made and how they should be applied to your own comments.php.
<?php if ( have_comments() ) : ?>
<div id="tabs">
<ul>
<li><a href="#comments-tab"><span>Comments</span></a></li>
<li><a href="#trackbacks-tab"><span>Trackbacks</span></a></li>
</ul>
<div id="comments-tab">
<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('type=comment'); ?>
</ol>
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
</div>
<div id="trackbacks-tab">
<?php if ( ! empty($comments_by_type['pings']) ) : ?>
<h3 id="trackbacks">Trackbacks and pingbacks to “<?php the_title(); ?>”</h3>
<ol class="trackbacklist">
<?php wp_list_comments('type=pings'); ?>
</ol>
<?php else : ?>
<p>No trackbacks or pingbacks yet</p>
<?php endif; ?>
</div>
</div>
<?php else : // this is displayed if there are no comments so far ?>
With these edits in place and uploaded to your theme directory you should now have your comments and trackbacks separated in different tabs. As mentioned before you will still need to edit the CSS styles to match your theme. If you have any questions, just use the comment system.
