Pro Blog Design

Even if there’s a lot of quality WordPress widgets available, sometimes none exactly fits what you need. In that case, you’ll have to create your very own widget. It may sound difficult at first, but it is not if you have a little programming experience.

In this tutorial, I’ll show you how to write a simple widget to allow your readers to share your posts on their Twitter accounts.

1 – Creating Files and the Directory

Let’s start by creating a directory on your hard drive. On this tutorial, I’ll call it Twit It. Under this directory, create a file named twitit.php.

Edit the twitit.php file and paste the following code, which is telling WordPress that this file is a widget, specify the plugin/widget name and version and also give the credits to the author:

1
2
3
4
5
6
7
8
9

<?php
/*
Plugin Name: Twit It
Plugin URI: http://www.wprecipes.com
Description: A simple "Twit It" widget for WordPress
Author: Jean-baptiste Jung
Version: 1
Author URI: http://www.catswhocode.com
*/

2 – Creating the Functions

Now, we have to create the main function, which will be called when your widget has been added to a widget-ready zone.

This function will simply echo a link to Twitter with the post URL as a parameter.

Append the code below to the twitit.php file:

1
2
3
4
5

function twitit() {
global $wp_query;
$thePostName = $wp_query->post->post_name;
echo '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.$thePostName.' : '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';
}

Now, we have to deal with user defined parameters.

On the functions.php file from their theme, users can define some variables as such as $before_widget, $before_title, and so on. Theses variables are used to display a custom image, text or html tags within widgets. For example, the $before_title variable allow the users to specify something to appear before widget titles, to ensure a perfect theme integration.

This function will get all parameters from the functions.php file in order to make the widget perfectly integrated on the user’s theme.

1
2
3
4
5
6
7
8

function widget_twitit($args) {
extract($args);
echo $before_widget;
echo $before_title;
echo $after_title;
twitit();
echo $after_widget;
}

We’re almost done. We now have to create an initialization function, and hook the widget. This point is very important because it register the group of functions we just wrote as a widget.

1
2
3
4
5
6

function twitit_init() {
  register_sidebar_widget(__('Twit It'), 'widget_twitit');
}
 
add_action("plugins_loaded", "twitit_init");
?>

Save the file. You now have a fully functional “Send to Twitter” widget! You can install it on your blog like any other widget.

Styling the Widget

Now that you installed the widget, you saw how functional it is, but therefore, it is not very visually appealing. Happily, we added a #twitit css id on the container, which means that it will be easy to style it with CSS.

Simply paste the following styles to the style.css file from your theme. If you want, you can download and use the background image below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#twitit{
  background:#fff url(images/twitit.jpg) no-repeat top left;
  height:120px;
  position:relative;
  width:320px;
}
 
#twitit a{
  font-size:18px;
  font-weight:bold;
  position:absolute;
  top:30px;
  right:25px;
}

Complete Widget Code

Here’s the complete code I have used for the example widget:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
/*
Plugin Name: Twit It
Plugin URI: http://www.wprecipes.com
Description: A simple "Twit It" widget for WordPress
Author: Jean-baptiste Jung
Version: 1
Author URI: http://www.catswhocode.com
*/ 
 
function twitit() {
global $wp_query;
$thePostName = $wp_query->post->post_name;
echo '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.$thePostName.' : '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';
}
 
function widget_twitit($args) {
  extract($args);
  echo $before_widget;
  echo $before_title;
  echo $after_title;
  twitit();
  echo $after_widget;
}
 
function twitit_init() {
register_sidebar_widget(__('Twit It'), 'widget_twitit');
}
 
add_action("plugins_loaded", "twitit_init");
?>

That’s all for now! As you saw, creating a WordPress widget is definitely easy. The widget we created together is quite basic, but I’m sure it is a solid basis to get started with widget development.

About the author: Jean-Baptiste Jung is a 27 year old blogger from the French-speaking part of Belgium. Jean blogs about WordPress on WpRecipes and about Web Design and Development on CatsWhoCode.com. You can follow him on Twitter.