This theme tutorial applies to the following themes:

All Themes

How to create widgets for your themes (part 2)

Posted by Mark Forrester on 18 Sep 08

<br />This tutorial was written by one our awesome forum ninjas - Jordan Hatch.

This is the second part of a two-part tutorial showing how to create your own WordPress widgets for your WooThemes. The first part can be found here.

Creating Complex Widgets

In the previous tutorial, we worked on getting a Twitter widget in our Wordpress theme by using the theme’s function files. However, the widget required you to hard-code your user settings in the code, rather than like other widgets where you have options in the Admin Panel. Now we’re going to look at extending our Twitter widget and adding options.

We’ll be continuing using the code we created in the previous tutorial, shown below:

function myTwitterWidget() {

	?>
    <div class="widget">
		<div class="wrap"><h2>Twitter Updates</h2></div>
		<ul id="twitter_update_list"></ul></div>
		<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
		<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/1jh.json?callback=twitterCallback2&count=5"></script>
		<div class="fix"></div>
		</div>
    <?php

}
register_sidebar_widget('My Twitter Updates', 'myTwitterWidget');

First, we will configure our existing function to accept values from the options, and then later we will be creating the administration panel settings.

To add our options, we will be using WordPress’ `get_option()` function. This will retrieve an option from the settings table which we will use as an array. There will be two values - account and number (number to show).

	$settings = get_option("widget_mytwitterwidget");

	$account = $settings['account'];
	$number = $settings['number'];

We can now update our Twitter code to show these changes:

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<?php echo $account; ?>.json?callback=twitterCallback2&count=<?php echo $number; ?>"></script>

That’s all we need to do on the frontend. Now let’s look at creating the settings for the Widgets page. Like the frontend, the control panel is contained in a function. We will call it `myTwitterWidgetAdmin` for now.

function myTwitterWidgetAdmin() {
	// code goes here...
}

The first thing our function will do is to load the settings from the database. As before, we will load them using WordPress’ `get_option()`. We will then be checking to see if the form has been submitted, by checking for the `update_twitter` post variable, and update the database accordingly using WordPress’ `update_option()` function. We are doing some simple sanitization on the input.

	$settings = get_option("widget_mytwitterwidget");

	// check if anything's been sent
	if (isset($_POST['update_twitter'])) {
		$settings['account'] = strip_tags(stripslashes($_POST['mytwitter_account']));
		$settings['number'] = strip_tags(stripslashes($_POST['mytwitter_number']));

		update_option(”widget_mytwitterwidget”,$settings);
	}

So we’ve handled updating the database, and getting the settings. All that’s left is to present the form to the user. Here’s where a little bit of HTML knowledge is essential. The code below is pretty self-explanatory, with input fields and then a hidden input field (`update_twitter`) to let our function know when it’s been updated (see above). Note that you do not provide the submit button, WordPress wraps that around your code.

	echo '<p style="text-align: right;">
			<label for="mytwitter_account"> Account:
			<input id="mytwitter_account" name="mytwitter_account" type="text" style="width: 200px;" value="'.$settings['account'].’” /></label></p>’;
	echo ‘<p style=”text-align: right;”>
			<label for=”mytwitter_number”> Show:
			<input id=”mytwitter_number” name=”mytwitter_number” type=”text” style=”width: 200px;” value=”‘.$settings['number'].’” /></label></p>’;
	echo ‘<input type=”hidden” id=”update_twitter” name=”update_twitter” value=”1″ />’;

For those who aren’t that apt at HTML, here’s a quick explanation of what the code above does. We use the input boxes and fill them with the settings we already have. We do this twice, once for each field, and then we have a hidden field too.

There’s only one more thing we need to do. Like when we finished the original widget, we need to tell WordPress that this is the control panel for that widget.

To do this, add (outside the function):

register_widget_control('My Twitter Widget', 'myTwitterWidgetAdmin', 300, 200);

And our widget is complete. Why not give it a try? Browse to your ‘Widgets’ panel in the Admin CP and add your Twitter widget again. Click ‘Edit’ to see the settings panel.

The full code is shown below:

function myTwitterWidget() {

	$settings = get_option("widget_mytwitterwidget");

	$account = $settings['account'];
	$number = $settings['number'];

	?>
	<div class=”widget”><div class=”wrap”><h2>Twitter Updates</h2></div>

		<ul id=”twitter_update_list”></ul></div>
		<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
		<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/<?php echo $account; ?>.json?callback=twitterCallback2&count=<?php echo $number; ?>”></script>
		<div class=”fix”></div>

	</div>
	<?php

}

function myTwitterWidgetAdmin() {

	$settings = get_option(”widget_mytwitterwidget”);

	// check if anything’s been sent
	if (isset($_POST['update_twitter'])) {
		$settings['account'] = strip_tags(stripslashes($_POST['mytwitter_account']));
		$settings['number'] = strip_tags(stripslashes($_POST['mytwitter_number']));

		update_option(”widget_mytwitterwidget”,$settings);
	}

	echo ‘<p style=”text-align: right;”>
			<label for=”mytwitter_account”> Account:
			<input id=”mytwitter_account” name=”mytwitter_account” type=”text” style=”width: 200px;” value=”‘.$settings['account'].’” /></label></p>’;
	echo ‘<p style=”text-align: right;”>
			<label for=”mytwitter_number”> Show:
			<input id=”mytwitter_number” name=”mytwitter_number” type=”text” style=”width: 200px;” value=”‘.$settings['number'].’” /></label></p>’;
	echo ‘<input type=”hidden” id=”update_twitter” name=”update_twitter” value=”1″ />’;

}

register_sidebar_widget(’My Twitter Widget’, ‘myTwitterWidget’);
register_widget_control(’My Twitter Widget’, ‘myTwitterWidgetAdmin’, 300, 200);

It’s that easy to create widgets for your blog. Try experimenting and creating widgets for your other favourite websites. Perhaps a news widget, weather, or aggregate the best of your favourite blogs. The possibilities are endless!

1 Comments For This Post

  1. Dainis Graveris

    Wow, thanks, You are starting to deliver really useful stuff!! Keep up!

Leave a Reply

About WooThemes

WooThemes is a project started by three respected designers - Adii, Magnus Jepson and Mark Forrester - whom all share one thing: their passion for WordPress. All of the themes available on WooThemes are 100% unique and we can assure you that you won’t find similar CMS solutions elsewhere for any other platform.

We pride ourselves not only in the quality of our themes releases, but also that of our support & customer service. Our ultimate aim is to build a community of passionate WooThemes users, where future themes will be influenced by our userbase.

We truly love WordPress and after using any of our themes, you’ll not only love WordPress, but you’ll love WooThemes as well!

Sign up to our newsletter

If you’d like to stay updated with all our latest product offerings and releases, please complete the form below and we’ll send you an e-mail every now and again with all the latest WooThemes news.