Last week i wrote an article about disabling trackbacks and pingbacks in wordpress comments, but today instead of disabling them we will separate them from comments. To see how it looks you can check some of my articles here on wpCanyon.

<?php if ($comments) : ?>

	<ol>

	<?php foreach ($comments as $comment) : ?>

		<li id="comment-<?php comment_ID() ?>" class='commentItem'>
			<!-- THE COMMENT LAYOUT -->
		</li>

	<?php endforeach; /* end for each comment */ ?>

	</ol>

<?php endif; ?>

Above we can see a stripped version of an ordinary comment loop which will show comments, trackbacks and pingbacks all in one place. Let’s change that.

1st Step / Separating

<?php if ($comments) : ?>

	<ol>

	<?php foreach ($comments as $comment) : ?>

		<?php
		$commentType = get_comment_type();
		if($commentType == 'comment') :
		?>

			<li id="comment-<?php comment_ID() ?>" class='commentItem'>
				<!-- THE COMMENT LAYOUT -->
			</li>

		<?php endif;/* end if comment check */ ?>

	<?php endforeach; /* end for each comment */ ?>

	</ol>

<?php endif; ?>

get_comment_type is a function that returns “comment”, “trackback” or “pingback” depending what type the current comment is.

Now just copy paste the same code again and just change “if($commentType == ‘comment’)” to if($commentType != ‘comment’) which is the opposite of “==” and change the class from “commentItem” to “trackbackItem” so you can easily make different styles.

<?php if ($comments) : ?>

	<ol>

	<?php foreach ($comments as $comment) : ?>

		<?php
		$commentType = get_comment_type();
		if($commentType != 'comment') :
		?>

			<li id="comment-<?php comment_ID() ?>" class='trackbackItem'>
				<!-- THE PINGS LAYOUT -->
			</li>

		<?php endif;/* end if NOT comment check */ ?>

	<?php endforeach; /* end for each comment */ ?>

	</ol>

<?php endif; ?>

2nd Step / The Layout

Making the layout for pinbacks/trackbacks is very simple, there is only 1 function we are going to use, comment_author_link(). It just echoes the trackback/pingback link and that’s all we need.

<li id="comment-<?php comment_ID() ?>" class='trackbackItem'>
	<?php comment_author_link(); ?>
</li>

That’s it. Styling is up to you :)

Notice: The whole comments part is simplified for easier understanding of how to separate this, but you shouldn’t leave out the part where you check if the comment is awaiting moderation or comments are closed.

Why separate?

Thought about going through this before jumping into the code but i decided to put it at the end.

Let’s take a look at 2 screens i made.

All mixed together

bad

The screenshot above is taken from 1stWebDesigner.

The biggest problem in my opinion is that the conversation is broken and can become less useful. Another thing is that some articles can get a big amount of pings and push the comment to far down. And it doesn’t look nice, doesn’t it?

Separated

good

The screenshot above is taken from the blog you are reading at the moment :)

As you can see the conversation isn’t broken by the pings. The comment form won’t be pushed to far down if there are many pings. And it looks nice, doesn’t it? :)

Let me know what you think about this.

Our WordPress themes
We have a few WordPress themes that we would like you to take a look at if you want.
check out the portfolio