Shopping Cart (0)

Posted January 31, 2012 by Rockstar Frog Categories: Code Snippets

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:

add_action("widgets_init", create_function('', 'return register_widget("twitterCount_Widget");'));

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

function twitterCount_Widget() {
  parent::WP_Widget(false, $name = 'Twitter Count Widget');
}

Empty Widget

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:


 


    Twitter Username
   
 


Widget Meta

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 '<';
  ?>

  " . $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.

Working 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;}

Styled Widget

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.

Comments

05/02/2012 11:33 pm
Guru Frog

@Rockstar Frog – I presume you create a widget in a .php file, where do you upload the PHP file to?

Leave a Comment

TimThumb not displaying images? Let’s fix that!

If you've noticed that a number of images aren't displaying correctly ... Read more

George has something new to show you

Hello tadpoles! We're as happy and excited as a dog with two tails, to tell you about the latest theme from the team around the pond. It's called Cohesion, and we like to think of it as "a socially-engaged business theme". Read more

Adding a Tweet Box to your site

Both Windows and Mac are integrating social media platforms more and m... Read more

Valentines Giveaway: Win a copy of our new gorgeous theme – Occasions

Love is in the air, and lucky for you frogs aren't immune to Cupid's m... Read more

Creating a useful 404 page – for both your visitors and yourself

Having a creative 404 page is always fun. Site developers end up spend... Read more

eFrog News Categories

Browse our themes