WooThemes

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!