Create Your Own WordPress Widget

Widgets make your life easier with sorting out your sidebar in WordPress, however sometimes there’s information or perhaps an external source/item that you want to turn into a widget but just don’t know how.

To create a very basic widget it’s quite simple. We just need to add a function into our functions.php theme file which outputs the content, and then register it as a sidebar widget. Sounds easy? It is 🙂

So, let’s use our WordPress login form as an example. I’ve covered how to add a login box before, so we’ll take this code as our user code. All we need to do with it is wrap this in a function i.e.

[php htmlscript=”true”]<?php
function lbox_widget() {
if (!is_user_logged_in()) : ?>

<form id=”loginform” action=”<?php echo get_option(‘home’); ?>/wp-login.php” method=”post”>
<fieldset><legend>Login</legend>
<div>
<label for=”log”>Username
<input type=”text” name=”log” id=”log” size=”20″ /></label>
</div>
<div>
<label for=”pwd”>Password
<input type=”password” name=”pwd” id=”pwd” size=”20″ /></label>
</div>
<div>
<label><input name=”rememberme” type=”checkbox” id=”rememberme” value=”forever” /> Remember Me</label>
</div>
<div>
<input type=”submit” name=”wp-submit” id=”wp-submit” value=”Log In” />
<input type=”hidden” name=”redirect_to” value=”<?php echo urlencode(get_permalink()); ?>” />
</div>
</fieldset>
</form>

<?php else : ?>

<ul>
<li><a href=”<?php echo get_option(‘home’); ?>/wp-admin/”>WP Admin</a></li>
<li><a href=”<?php echo wp_logout_url(get_permalink()); ?>”>Logout</a></li>
</ul>

<?php endif;
} ?>[/php]

Of course at this point you could just use the function call and place that in your sidebar or whereever you wanted it. However, for ease of use, especially if the site isn’t actually for you but someone who is less clued up on code, we can register it as a widget and then it can just be added to our dynamic sidebar in which ever location you want. So to register our function as a widget we use the register_sidebar_widget() function eg.

[php htmlscript=”true”]<?php register_sidebar_widget(__(‘Login Box’), ‘lbox_widget’); ?>[/php]

We can place this before or after the function. The first parameter is the name of the widget, which is only seen in the Widgets admin page. The second parameter is the function name for our widget.

If you add all of this code into your functions file then go to your Widgets admin page under Appearance, you should now see a new widget called ‘Login Box’.

That is the basic method, however in our widgetise your theme post I also covered about setting the code to go before and after the widget and before and after your heading. We can then pull this into our login box function, so that we set the before and after widget code in the function. To do this we pass the variable $args to our login box function. We then extract this and then we have the array keys set which if you remember were

[php]array(
‘before_widget’ => ‘<li>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
);[/php]

So we can then use $before_widget, $after_widget, $before_title and $after_title in our function output if we want. For this function there isn’t really a title, however we could insert one for logged in users such as ‘Welcome Back’. So to put these changes into practice we now use:

[php htmlscript=”true”]<?php
function lbox_widget($args) {
extract ($args);

echo $before_widget;
if (!is_user_logged_in()) : ?>

<form id=”loginform” action=”<?php echo get_option(‘home’); ?>/wp-login.php” method=”post”>
<fieldset><legend>Login</legend>
<div>
<label for=”log”>Username
<input type=”text” name=”log” id=”log” size=”20″ /></label>
</div>
<div>
<label for=”pwd”>Password
<input type=”password” name=”pwd” id=”pwd” size=”20″ /></label>
</div>
<div>
<label><input name=”rememberme” type=”checkbox” id=”rememberme” value=”forever” /> Remember Me</label>
</div>
<div>
<input type=”submit” name=”wp-submit” id=”wp-submit” value=”Log In” />
<input type=”hidden” name=”redirect_to” value=”<?php echo urlencode(get_permalink()); ?>” />
</div>
</fieldset>
</form>

<?php
else :
echo $before_title.”Welcome Back”.$after_title;
?>

<ul>
<li><a href=”<?php echo get_option(‘home’); ?>/wp-admin/”>WP Admin</a></li>
<li><a href=”<?php echo wp_logout_url(get_permalink()); ?>”>Logout</a></li>
</ul>

<?php endif;
echo $after_widget;
}

register_sidebar_widget(__(‘Login Box’), ‘lbox_widget’);
?>[/php]

As you can see here, I’ve passed the variable $args to the function. Then on line 3 I extract these which then allows me to echo them out like standard variables. I’ve then added the $before_widget variable on line 5 and the $after_widget on line 39. Finally I’ve inserted our new title in at line 30.

If you update your functions file with that code and then refresh your site (assuming you’ve added the new widget in already) then you should see the changes. Don’t forget, you’ll only see the login box if you’re not logged in. I recommend using two browsers to see the two different versions (or logging out then back in!).

This is just a simple method for adding your own widgets. You can use this to add any code/script or standard markup of your own.

Next week I’ll explain how we can change your standard plugin to offer a widget as well, and also how to add options into the widget admin page.

  •  
  •  
  •  
  •  
  •  

Disclosure: In full disclosure, it is safe to assume that the site owner is benefiting financially or otherwise from everything you click on, read, or look at while on my website. This is not to say that is the case with all content, as all publications on the site are original and written to provide value and references to our audience.

2 Comments

  1. Not John Chow June 4, 2009
  2. laymen June 5, 2009