eFrog Digital Design |

When developing custom WordPress themes, having a knowledge of WordPress widgets is exceptionally handy. Developing custom widgets allows you to add niche bits of code to your site, whilst still leveraging the flexibility that WordPress widgets allow.

In this post, you’ll learn how to:

1. Create a custom widget
2. Add some meta fields to the widget
3. Create the front-end display for the widget

Using the principles behind this, you’ll be able to generate your own custom widgets in minutes.

Download a copy of a ready-to-use (empty) custom widget file here.

The Widget

Essentially the widget requires 4 functions in order to function. And these 4 functions are wrapped in a PHP Class that extends the WP_Widget class. The functions are

• The Constructor
  This is a basic function that we use to give our widget a custom name that appears on the widgets page in the admin.
• Widget Settings / Meta Fields
  If your widget allows for some meta fields for the user to save/update, then this is where those settings are stipulated. In the case of this Twitter Count widget, we’d have a setting where you’d enter the username, the count of which will be displayed in our widgets front end.
• Widget Front End
  This is where you’d place your HTML/PHP/CSS that the sites visitors will actually see on your site.
• Widget Saving
  Assuming that your user is entering some custom meta fields, these need to be saved. So this function handles the saving/updating of each of these fields.

So firstly, we create/register our widget:

Now we start with the first of our 4 functions, the constructor.

You’ll note that the constructor function uses the same name that we used to register our widget. Once this is done, we now add the function to let the user save some meta fields to this widget:

This function will now save the ‘twitter_username’ to this widgets instance. You’ll note that its using an “$instance” function to echo this value. In many cases, you’ll want to use a widget more than once – perhaps showing it in multiple sidebars. By specifying the $instance, we’re able to add as many instances of this widget as you like throughout the site.

Now that you’ve created your widget, you’re going to want to create some sort of front-end styling for how the widget looks.

In the case of this Twitter Counter widget, we’re going to use the username we saved to the widget – efrogthemes – and insert it into a code snippet I got from which will get the follower count of the specified Twitter account.

  # makes the arguments into normal variables example $args['before_widget'] is now $before_widget
  extract( $args );

  echo $before_widget;
  echo "

"; // wrapping div to give this widget a custom class
  echo $before_title . $instance['widget_title'] . $after_title; ?>

    $twit = file_get_contents('http://twitter.com/users/show/'.$instance['twitter_username'].'.xml');
  $begin = ''; $end = '';
  $page = $twit;
  $parts = explode($begin,$page);
  $page = $parts[1];
  $parts = explode($end,$page);
  $tcount = $parts[0];
  if($tcount == '') { $tcount = '0'; }
    echo '<

'.$tcount.' followers.

';
  ?>

  " . $after_widget;
} ?>

The last bit of code, is the function that saves the contents of our widget.

  $instance = $old_instance;

    $instance['twitter_username'] = strip_tags($new_instance['twitter_username']); // this line must be repeated for each meta value that you create for this widget

  return $instance;
} ?>

At this stage, we have a working, albeit boring widget.

You can now style this as you wish. For the sake of this demo, I grabbed a simple image from Iconfinder and I’m going to use it as a background image on the div that is wrapping my follower count. I then added the style below to the ‘twitter_count_value’ div:

.twitter_count_value {padding: 3px 0 3px 80px;background: url(http://cdn1.iconfinder.com/data/icons/quartz/Twitter.png) 0 center no-repeat;}

And there we go.

You can download an empty, thoroughly commented custom widget file or the we’ve created to use on your own site.

Did it work for you? Let us know where you’ve used it.