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

by derek on December 30, 2008 · 26 comments

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.

Post Meta Information

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.


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:

.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!

Stay In The Loop!

Subscribe to the Derek Semmler dot com feed via RSS or Email to receive notifications when new posts are published. Follow the WordPress ninja on Twitter too!

{ 26 comments… read them below or add one }

Blog Expert December 30, 2008 at 6:15 pm

I know a lot of people have been asking this question over at the support forum. I will definitely recommend them to this post.
Blog Experts last blog post..How I Gained 200 RSS Subscribers in 2 Days

Reply

derek December 31, 2008 at 4:11 pm

Cool, I haven’t poked around the support forum too much myself but hopefully others can find this helpful.

Reply

Ling@Uptake December 31, 2008 at 1:49 am

I was waiting for Threaded Web to come into it somewhere right from the start of the post. You know, you’re good at this stuff. Maybe you should consider investing a bit on Adwords, and try to get some customers directly to Threaded Web. I’m pretty sure it’ll be worth it.

Reply

derek December 31, 2008 at 4:14 pm

Lol, I’d actually thought about writing this post on the Threaded Web blog but decided I could simply tie it in at the end.
I’ve got an AdWords experiment running right now and when that concludes I have been thinking about a campaign to try and get some traffic (and potentially customers) to Threaded Web.

Reply

Kelvin Kao December 31, 2008 at 2:59 am

Cool… Just need to find the right line of code and move it up.
Kelvin Kaos last blog post..10000 Spam Comments

Reply

derek December 31, 2008 at 4:15 pm

Give me a holler if you need any help.

Reply

Jessica W December 31, 2008 at 3:23 am

Thanks.. I am sure many will find this very useful, although majority of new Wordpress templates already have this included.
Jessica Ws last blog post..Why is Professional Web Design so Important

Reply

derek December 31, 2008 at 4:16 pm

No problem! It is true that many themes have this included, but for those that don’t, I hope this can help them if this is a feature that they want.

Reply

Nicole Price December 31, 2008 at 8:31 am

Thanks. You are right to have shared this with all your readers. I too am interested and shall see if I can put it in.
Nicole Prices last blog post..The Best Commercials of 2008

Reply

derek December 31, 2008 at 4:16 pm

Glad to hear that you enjoyed it and might be able to make some use out of these tips.

Reply

Terry December 31, 2008 at 9:04 am

Atother gret heads up. Thanks Derek.
Terrys last blog post..Donations made easy

Reply

Nick@romandock dot com December 31, 2008 at 8:05 pm

Great Tip! I’m sure this will help many, and maybe even drive some traffic to Threaded Web 🙂
I think you were wise to post it here and link there as it gets it infront of many more people and probably a higher ranking in Google as well.
Nicks last blog post..I Found Two More Feeds To Subscribe To

Reply

derek January 3, 2009 at 12:12 am

Since posting about the redesign (and this mention), there has been a slight increase in traffic to Threaded Web so it does seem like it was a good decision.

Reply

Jayson January 1, 2009 at 1:06 am

Thanks for the help Derek! 😉

Reply

derek January 3, 2009 at 12:12 am

Jayson, you’re quite welcome!

Reply

Jesse@SoLinkable January 2, 2009 at 2:24 pm

This is a great mod – as long as you have comments to show. If you end up with 15 stories on your front page, each with “No Comments” written beside them, that doesn’t look too good. On the other hand, if you have a nice and active following, this can help greatly. I am more likely to comment if I am not the only one doing so. Good luck blogging!

Reply

Nick@romandock dot com January 2, 2009 at 4:24 pm

Actually, you’re better off commenting if no one else has because you’re more likely to get readers and viewers from that site’s viewers (they will be more likely to see your link and also have less other options to click to) and also you’ll be more likely get more attention from the author because they don’t have a bunch of others to divide their attention between!
Nicks last blog post..Goals For 2009

Reply

derek January 3, 2009 at 12:14 am

As Nick mentioned, being the first (and even the only) person to comment can be quite beneficial. Often times there are plenty of people reading that do not comment, but they do follow links from the people that do comment.
Plus it is a great way to establish a relationship with the owner of the blog, assuming that they actually respond and begin a dialog.

Reply

Steve@Free iPods January 3, 2009 at 11:53 am

I’ll get around to setting up something on WP one day, it has this incredible mystique about it and I have therefore taken the easy (but second rate) option of Blogspot.

Reply

Money Academy January 12, 2009 at 8:00 pm

and this link appears on homepage too or just inside the post ?

Reply

Nick@romandock dot com January 12, 2009 at 8:06 pm

It would depend on which theme file you modify. If you modify index.php it would be for the homepage, if you do it in single.php, it would be for individual posts.
Nicks last blog post..I will be beta testing Windows 7

Reply

derek January 12, 2009 at 10:29 pm

Actually, based on the WordPress Codex this tag does not render anything when is_single() or is_page() is true – which means this tag will only work on your main page.
Now, I have not actually tested this because I was only interested in displaying the extra comments link on the main index page but the documentation tends to be fairly reliable when it comes to WordPress.

Reply

Nick@romandock dot com January 12, 2009 at 10:43 pm

Ok, I just looked in my theme files and you’re right, that tag doesn’t display anything on the individual post pages. However,

can be used to display the number of comments on an individual post page (such as is displayed at the top of the comments section).
Nicks last blog post..I will be beta testing Windows 7

Reply

Nick@romandock dot com January 12, 2009 at 10:45 pm

Oops, here I’ll remove the php open and close tags:
comments_number(__(“Comments”), __(“1 Comment”), __(“% Comments”));
Nicks last blog post..I will be beta testing Windows 7

Reply

Travis@free Homepage September 5, 2011 at 6:00 am

Great insight and some very useful stuff for linkbuilders, I wish i would have a site in WP. I don’t think for 2012 there’s going to be any way around WP

Reply

paul elwell June 1, 2013 at 11:02 am

Plus it is a great way to establish a relationship with the owner of the blog, assuming that they actually respond and begin a dialog.

Reply

Leave a Comment

Previous post:

Next post: