Iarfhlaith Kelly - Code agus Craic

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.