WordPress Plugin to Display Alexa Ranking on a Sidebar Widget

Posted on Posted in Blog

Here is an article on how to code a plugin that displays a widget. The coding simply extends the WP_Widget class of WordPress so it needs WP version 3.1 and above. For simplicity, I’m just going to display the Alexa Ranking in the sidebar by using the code I made in one of my posts “Sample Code: Determine Alexa Ranking using cURL“.

You may find this unnecessary and you would probably ask yourself “why do I need to display my Alexa ranking on my website?” Well, its nothing really. The purpose of this article cum tutorial is on how to make a widget on the sidebar NOT on how important or how useless Alexa Ranking is.

As a side note, let me give you some insights on what the purpose of Alexa Ranking is, and how they rank websites around the world. First, Alexa invites people to install toolbars in their web browsers. These toolbars (or extensions in Chrome) gather information from users and relay these information to Alexa’s servers. The information could be used to provide analytics of user’s preferences like how many times they visit certain websites. Alexa Ranking is based on how many times the websites are visited by people with the highest rank (No. 1) being the most visited.

Now, let me show you the code of the plugin. The file is show-alexa.php and you would be surprised that creating the plugin is quite easy to do.
[php]
‘Alexa_Widget’, ‘description’ => ‘Display Alexa Ranking widget’);
$this->WP_Widget(‘Alexa_Widget’, ‘Display Alexa Ranking Widget’, $widget_ops);
}

function form($instance)
{
$instance = wp_parse_args((array) $instance, array( ‘title’ => ” ));
$title = $instance[‘title’];
?>

“;

echo $after_widget;
}
function retrieve_alexa_ranking ($site){
$url = “http://www.alexa.com/search?q={$site}&r=home_home&p=bigtop”;

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$content = curl_exec ($ch);
$content = str_replace (array(“rn”, “n”, “t”), “”, $content);
preg_match_all (‘/Alexa Traffic Rank:(.*?)/’, $content, $result, PREG_SET_ORDER);

$rank = str_replace (“,”, “”, $result[0][2]);
return $rank;
}
}
add_action( ‘widgets_init’, create_function(”, ‘return register_widget(“Alexa_Widget”);’) );
?>
[/php]
Sidebar widget programming is easier now compared to the past methods. This is because of WordPress’ addition of the WP_Widget Object. Let me explain some things in the plugin.

The add_action () function at the end of the script loads the Alexa_Widget Class. The class basically extends WP_Widget and overrides the following functions: the constructor (as Alexa_Widget()), form(), update() and widget(). I also added another method retrieve_alexa_ranking().

The form() method is used to display the form to the user. Since this is a widget, the settings for the form is accessible in the Widget panel. When dragged to the sidebar location, the widget’s form could be altered or set. For now, our sidebar asks only the title of the widget; which is displayed at the top of the widget. You may add other settings here and just make sure that they be saved in the update() method.

The widget() method is used to display the widget when it is shown in the sidebar. For our widget, we used the retrieve_alexa_ranking() method found at line 50 of the plugin’s code. This function is the same function I used in the PHP cURL article I described above.

So there you go. Thats how easy widget programming for WordPress is.