Adding a Comment Button to your Blog

How to Add a Comment Button to your WordPress Blog

As a follow up from my previous post, I’ve put together this quick guide on how to add a comment button to your WordPress blog.

It’s a fairly easy process that should only take about five minutes.

1. Save Your Button to the Web Server

The first thing you need to do is select your favourite button. I suggest picking one that fits with the existing colour scheme of your blog site. Try to avoid adding a button with a colour that clashes with the rest of the colours on your site. I know you want people to notice it, but you don’t want to blind them!

Once you’ve picked your favourite button, use an FTP program to upload the button to the image directory within your theme folder. For example, the image folder of WordPress’s default theme is located at:

/wp-content/themes/default/images

2. Edit Your Theme

Once you’ve uploaded the button to the right directory, you need to add the code in your theme to display it.

In WordPress, each theme is made up of a variety of different files. But we’re only interested in the one named index.php. Open this file in your favourite editor and find the line that looks like this:

<div class='entry'><?php the_content(); ?></div>

Directly after it, add the following code:

<div class='commentPrompt'>
<?php
comments_popup_link(
  "<img src='/wp-content/themes/default/images/comment.gif' />"
, "<img src='/wp-content/themes/default/images/comment.gif' />"
, "<img src='/wp-content/themes/default/images/comment.gif' />"
, "commentPromptLink","Comments Closed");
?>
</div>

Remember to replace the URL in all three places to the location of your own comment button.

If you would like to know the full meaning behind this code, visit the official WordPress documentation for the template tag. It’s very well written and doesn’t assume that the reader has previous coding experience (provided that you start at the start).

3. Add Some Style

If you look closely to the above code, you’ll see that I wrapped a div tag around it and gave it a class name of ‘commentPrompt’. This will allow you to add some style to the area directly surrounding the button and help integrate it with your theme’s original design.

For my own blog, I’ve centered my comment button within a box and given it some padding and a dotted border, but I’d encourage you to try your own design so it looks ‘at home’ in your own blog’s design.

Here’s the CSS code I used for the box surrounding my comment button:

.commentPrompt
{
    padding:10px;
    text-align:center;
    border:dashed 1px #FF6600;
    background-color:#fefee2;
}

Well that’s about it. Hopefully this has been helpful. I’d be delighted to hear from anyone who found this code useful.

Comments

7 Comments added. Add comment?

  1. Darragh says:

    Well done sir, great guide. I’ll add it to my original post too 🙂 Fair play to you!

    May 20, 2008
  2. Iarfhlaith says:

    Cheers again Darragh.

    I promised myself when I started blogging that I wouldn’t turn it into a load of posts full of code samples, and I’ve managed to keep that promise until today.

    Ah well. Hope it’s of some use to someone.

    May 20, 2008
  3. Julie Kenyon says:

    I lov e the buttons! Can I add one to Blogger?

    Jul 14, 2008
  4. Iarfhlaith says:

    Hey Julie,

    Thanks I’m glad you like them!

    I don’t really use Blogger so I’m not that familiar with it, but to help you out I took a quick look ‘under the hood’ to see what I could find.

    Here’s a quick guide to adding custom comment buttons for Blogger.

    1. In the admin area, click on the ‘Layout’ tab.
    2. Then in the 2nd row of menu options choose ‘Edit HTML’.
    3. Under the ‘Edit Template’ section tick the box next to ‘Expand Widget Templates’.
    4. Find the section in the template code used to display each blog post.
    5. Replace the text within the ‘post-comment-link’ with the code to display the comment button.
    6. You’re done! Now save everything by clicking ‘Save Template’.

    I’ve skimmed over a lot of the nitty gritty, but that’s basically what’s involved.

    I hope this helps.

    Jul 14, 2008
  5. Julie Kenyon says:

    I’ll try this. Thanks!!!!!!!!!!

    Jul 14, 2008
  6. acai jones says:

    thanks
    🙂

    Sep 24, 2008
  7. nagoessectTot says:

    [url=http://hiast.edu.vn/ctsv/moodle/soma-pills-for-sale.php]compare soma prices[/url] soma for teens = [url=http://moodle.brauer.vic.edu.au/soma-place.php]where to buy safe soma[/url] 100 pills fast delivery = [url=http://m7.mech.pk.edu.pl/~moodle/soma-prescription.php]mortality rate 100 20 capsules nitrates[/url] order cheap soma fas = [url=http://facultyweb.wcjc.edu:8080/moodle/soma-price.php]buy generic soma[/url] soma pharmacy drugs online = [url=http://moodle.brauer.vic.edu.au/soma-purchases.php]cream overnight online[/url] soma oral suspension = [url=http://academy.uax.edu.mx/moodle/soma-rx.php]is soma available over the counter[/url] find soma = [url=http://elearning.phiman.ac.th/soma-sale.php]kaufen soma[/url] best price creme = [url=http://moodle.mueller.qld.edu.au/soma-saturday.php]soma order uk[/url] generic soma pill = [url=http://m7.mech.pk.edu.pl/~moodle/soma-seeds.php]free generic soma[/url] soma saturday delivery cod = [url=http://ukvm.lt/virtualiaplinka/soma-shipping.php]longer sex with soma[/url] cheapest soma substitute sildenafil

    Dec 10, 2009

Sorry, comments for this entry are closed at this time.