Blog Tip :: How To Add Comments Link At Top Of Post

Spread it!

Share

The other day I received an email from a reader that had a question about how to add a new feature to their site. Since they had seen this feature on this blog, they were hoping that I could help:

I’ve been looking for a WP plugin that shows how many comments have been made at the top of a blog post – e.g. 2 comments (next to our near the title). I noticed your blog uses it – any help would be appreciated.

Knowing that the person that asks a question is usually not the only person with that question, I thought I would share my answer here in the form of a blog post.

Before we dive into how to accomplish the task of adding the display (and a link) of the comments at the top of a blog post, lets take a look at exactly what we are trying to add.

In the image above, you will notice that there is a display (and corresponding link) for the following post meta information:

• Post author
• Post date (there is no corresponding link for the date)
• Post category
• Post comments
• Post administration (only visible when logged in)

While the code snippet below will indicate how each piece of post meta information is added to the display, we are primarily interested in how to add the comments to the post. As we look at the code used to accomplish this, I will note that there are no WordPress plugins required for this functionality. Each piece of post meta information is added to the display with the use of WordPress template tags.

To get this post meta information to display at the top of the post, I have the following code included directly below the <H2> tag that displays the post title.

1
2
3
4
5
6
7

<p class="postmeta">
  <span class="post-author"><?php the_author_posts_link() ?></span>
  <span class="post-date"><?php the_time('j M, Y') ?></span>
  <span class="post-filed"><?php the_category(', ') ?></span>
  <span class="post-comment"><?php comments_popup_link(__('No Comment'), __('1 Comment'), __('% Comments'), 'commentslink', __('Comments are off')); ?></span>
  <?php edit_post_link(__('Edit'), ' &#183; ', ''); ?>
</p>

The tag that we are interested in here is the comments_popup_link tag. As you can see, there are a handful of parameters passed to this tag. While you can read more about the parameters on the WordPress Codex, I will give a brief description of each parameter:

1. Text to display when there are no comments
2. Text to display when there is only one comment
3. Text to display when there is more than one comment; % is replaced with the number of comments
4. CSS class to use for the comments link
5. Text to display when the comments are disabled

When using comments_popup_link(), you have the ability to choose between a link that will open a popup window or a link directly to the comments. If you prefer the use of a popup window to display the comments, you will also need to implement comments_popup_script() on your site. Personally, I am not a fan of popup windows so my link will take you straight to the comments.

One important note to remember when adding this to your theme, you must include this tag within the main loop that is responsible for displaying the posts on your main page. Also, this tag does not render when viewing a single post or page so don’t think something is wrong if you do not see it on the single post view.

Bonus Tip :: CSS Styling

In the screen shot above, you might have noticed that each of my links also includes a nifty little icon yet the code snippet did not indicate any images were being used. The addition of the images has been handled within the CSS, as you will notice that each piece of post meta information has a corresponding CSS class defined.

As an example, the following CSS class has been defined for the display of the post comments:

1
2
3
4

.post-comment {
	padding: 0 0 0 20px;
	background: url(images/icon_comments.gif) no-repeat 0 0;
	}

So there you have it – now you too can add the display of comments at the top of your post.

If you’re interested in having a feature like this added to your blog but the above description makes you tremble with the fear of breaking your site, you should get in touch with Threaded Web to get you up and running in no time!

Tagged as: css, plugins, tips and tricks, tutorial, wordpress