Flood

Best Captcha for WordPress

24 December, 2010

Captcha is one of the fundamental methods for combating spam and flooding in comments on every website. It serves as a test for users to verify that they are human, aimed at filtering out spam bots and lazy spammers. Captchas are usually image-based.

WordPress doesn’t come with a built-in captcha feature, which may lead one to believe that WordPress developers are not concerned about spam. However, they have provided the ability to integrate your own captcha, but it’s not included by default.

For websites like mine, even though it only gets about one and a half visitors, a captcha is necessary because bots don’t care where they spam, as long as they are in their database. I can’t even imagine what happens on popular websites.

So, I decided to implement a captcha myself, and naturally, I want to use the best option available. Unfortunately, I can’t do without a plugin, so I have to use someone else’s work. I immediately thought of how the characters in images that are impossible to decipher make me want to throw up, which makes me want to use a convenient captcha.

If you look, you will always find something! I used Dcaptcha on my sites before. It was very convenient, just a checkbox that you need to check to confirm that you are human. But it has its drawbacks. First, the author brazenly inserted a link to his site, without the ability to disable it without modifying the code (sorry, author, if you want to make a profit, it’s better to sell it). Secondly, bots now successfully pass this check. Thirdly, it no longer works properly on newer versions of WordPress, and the plugin is not updated. So, I dumped it.

But I noticed the results of the CheckBot plugin when I was testing “Maxsite CMS”. This captcha involves selecting one image from three options to post a comment. It’s simple and convenient.

I found this plugin for WordPress too. The author definitely deserves credit! He took care of the user, first by creating such a plugin and secondly, by making it easy to customize.

What’s really nice is that the author added the option to choose where to place the captcha. This includes two methods for integration – automatic and manual, where you just need to insert the code into the right place:

<?php if( function_exists(checkbot_show) ) { checkbot_show(); } ?>

So, there’s no need to break your head over how to edit the plugin to display it properly if you have your own design rather than the standard one.

Customizing the Plugin

I was also pleased that the plugin allows customization. The default setup displays three images of people, from which you must choose one (the person with the raised hand). However, if you’re a misanthrope and don’t like people, you can choose a different style or create your own!

To create your own captcha style, you just need to copy one of the standard folders from the plugin’s “images” directory and edit it as you like. Currently, there are two folders: “Default” (with people) and “Circles” (with circles). Copy “Default” and name it something like “my”, replace the images with your own, edit the CSS and the displayed text, select your set of images in the plugin settings, and voila – it works!

Improving the CSS

I don’t completely understand why the standard style file (style.css) looks like this:

#CheckBot {
    padding:0;
    margin:0;
}
#CheckBot #text {

}
#CheckBot #first {
    width:40px;
    height:40px;
}
#CheckBot #second {
    width:40px;
    height:40px;
}
#CheckBot #third {
    width:40px;
    height:40px;
}
#CheckBot .border_n {
    border:1px dashed #444;
}
#CheckBot .border_y {
    border:1px solid #444;
}
#CheckBot #copyright {
    font-size:11px;
    width:140px;
    padding:0;
    margin:0;
}

I haven’t found where and how the IDs #first, #second, and #third are used. If they have the same parameters, you can just list them with a comma, like this:

#CheckBot #first, #CheckBot #second, #CheckBot #third {
    width:40px;
    height:40px;
}

Also, it would be good for users to clearly see what they are selecting. When I first added “CheckBot”, I thought it wasn’t working because the cursor didn’t change when hovering over the buttons. Why? Let users see that it’s a button:

#CheckBot .border_n {
    border:1px dashed #444;
    cursor:pointer;
}

#CheckBot .border_y, #CheckBot .border_n:hover {
    border:1px solid #444;
}

That way, everything will look perfect. ;)

You can read more about the “CheckBot” plugin on the author’s website, and download it from there. Thanks!