Email Obfuscation – WordPress Shortcode

Recently I was working on a WordPress website and was into a situation where I wanted to protect the email address from spam bots but also didn’t want the legitimate users to go through the trouble of filling out captcha and click an extra link. WordPress do have a nice function called antispambot which does it alright. But not up to my satisfaction. This function converts the email address to special characters which is quite intelligent but let’s face it. Robots are going to take over the world soon. They are becoming more smart every day. It is quite possible that some bots (at least their coder) knows how WordPress does it and a simple decode will reveal the email address for them. Recaptcha also have a feature to protect emails from bots. But this is quite tedious. User have to leave the website just to see the email address. Also the Recaptcha’s popup window looks really awful on mobile devices.

So, I created a shortcode that will hide the email address by default and reveal it to users using JavaScript. At least bots are not smart enough to use JavaScript (yet!). As a very limited number of users will use browsers with JavaScript disable, they can do the extra work and get the email address through recaptcha validation. Let’s see the code.

function my_hide_email_shortcode( $atts , $content = null ) {
    $a = shortcode_atts( array(
        'email' => '',
    ), $atts );
    if ( ! is_email( $a['email']) ) {
    $email_parts = explode('@', $a['email']);
    $email_head = $email_parts[0];
    $email_tail = $email_parts[1];
    $obfuscated_email_link = get_options('recaptcha_email_link');  //It's wise to set the link from admin side instead of hard coding.
    wp_register_script( 'email-obfusc', get_stylesheet_directory_uri() . '/library/js/email_obfusc.js', array( 'jquery' ), '', true );
    wp_localize_script( 'email-obfusc', 'email', array('content' => antispambot( $content )) );
    wp_enqueue_script( 'email-obfusc' );
    return '<span class="mail_hide" data-mail-h="'.strrev($email_head).'" data-mail-t="'.strrev($email_tail).'"><a class="obfocused-email" href="'.$obfuscated_email_link.'" target="_blank"> ' . (strlen($content) > 0 ? antispambot( $content ) : __('View email address', 'mytextdomain')) . '</a></span>';
add_shortcode( 'hide_email', 'my_hide_email_shortcode' );

If we use the shortcode like [hide_email email="[email protected]"]See the Email[/hide_email] the email address will first be broken into parts, reversed and stored as data variable of the wrapper. Later I’ve revealed the email address to users using JavaScript. If JavaScript is not available, user will be sent to recaptcha link to retrieve the email address. Here is the JavaScript code.

    var mail_head = jQuery('.mail_hide').first().attr('data-mail-h').split('').reverse().join('');
    var mail_tail = jQuery('.mail_hide').first().attr('data-mail-t').split('').reverse().join('');
    var oldhtml = '';
    var mail = mail_head+'@'+mail_tail;
    var mail_content = email.content;
    if(mail_content.length < 3) {
        mail_content = mail_head + '@' + mail_tail;
    jQuery('.choobs_mail_hide').first().html('<a class="obfocused-email" href="mailto:'+mail+'">'+mail_content+'</a>');
    jQuery('.obfocused-email').on('mouseover', function(e){
        oldhtml = jQuery(this).html();
        jQuery(this).attr('href', 'mailto:'+mail);
    }).on('mouseleave', function(e) {

This script fetches the parts of email address, reverses them again and the joins to form the actual email address. I’ve added an effect to reveal the email address when user mouse over the content text. But if there was no content and shortcode was used only like [hide_email email="[email protected]"] the email will be revealed by default.

Go away spam bots!!

Advanced object selection using Mootools

Mootools’ “Selectors” utility has some really strong feature. It really saves a lot of time and sweat. Using this property, one can select a tag (any one can!), tag with specific name, id or any other attribute (huh!) and most amazingly part of a property value matching to some string…

Say you want to select all the div tags which has ID starting with ‘my’. How can you do that? Continue reading

Mootools Basics

Mootools is a great JavaScript library and I feel really comfortable using it. There are lot other libraries, like JQuery, DoJo, ExtJS. They have their own features, but I feel strong with Mootools. ExtJs is really good, but very much heavyweight. On the other hand Mootools is really lightweight. Including all the core features, it is only around 64KB. Special effects may weight around 100KB more.

Most used function of Mootools is the $ function. Its a bit confusing with JQuery and that’s why conflicts with JQuery, if used on the same page. $ selects a dom element from the document by its id. The syntax is $(‘element_id’). There is another pretty good function that I like is $$ function. It selects elements by class name or tag etc. More on this functions are available at Mootools documentation.

Mootools Request feature is another great thing to have. This AJAX calling function is capable of sending AJAX request either in GET or POST method.

These are the basic functions one may need to develop a regular web application. There are also other common helper functions for Array, String, Number, Cookie etc. For detail idea about Mootools it is suggested to visit Mootools Documentation at:

One thing to keep in mind. Whenever you are adding some JavaScript code on your documents HEAD, make sure it is inside a document onReady or onLoad function. Otherwise you’ll get stuck with JS errors. Most of the cases, the common mistake is like using the JS code to get an element at the HEAD, but the body is still loading… So the script couldn’t find the element and through error.

For Mootools, this onLoad wrapping syntax is like this:

window.addEvent('domready', function(){
//Your Code Here

An Website Colorscheme Editor

I’ve worked on a website color scheme editor recently. The main idea was to change the colors and banner of a website. The target website was my recent work with my department’s website.

Well…. There are a lot of color scheme editor available on the web, but I tried something different. I wanted to give the complete control to the administrator. But, uff…. It was really tough.

Main things I had to do was

  • To select a suitable color picker.
  • Then identify the areas the colors should be changed.
  • Store the color information.
  • Generate the CSS file according to the changes.

Continue reading

IIS doesn’t support .htaccess!

IIS server doesn’t support .htaccess file!!!

This is a problem for most of us PHP developers. At least for me! Whenever I build a website, the default page is index.php. IIS doesn’t take index.php as the default page. It looks for default.html/index.html etc. I don’t have access to the configuration files of the server. What to do? If anybody have any professional idea, please suggest. I don’t have any idea how to solve this problem.

Then I figured out to use JavaScript. Create an index.html page which will just redirect to the index.php file. Simple… Only a single line to add in the JavaScript code segment:


But this method was working for simple website redirection but faced problem when there is some parameters with the URL. Then I figured this following JavaScript code:

var cururl = window.location.href;
var splt = cururl.split('?');
var newurl = 'index.php';
if(splt.length > 1)
newurl = 'index.php?'+splt[1];
window.location.href = newurl;

I think this would be helpful for some people. If you have any other nice and professional approach to solve this please suggest here.