WooThemes

This tutorial was written by one our awesome forum ninjas - Jordan Hatch.

In some of our recent theme releases, like FreshFolio and PaperCut, we have included our own widgets which you can use in your sidebar, which have the functionality of ad blocks, Flickr photos and even Twitter feeds. In this tutorial, I’m going to show you how you can create your own widgets, which can work in any theme and have functionality only limited by your imagination.

Creating Simple Widgets

For this tutorial, we’re going to be working with Fresh Folio, the newest WooTheme, but it’s really easy to migrate the code to other themes by looking at your theme’s widget code and then modifying the code here to suit, using the same classes etc.

The file that you’re going to be creating the widget in will be `includes/widgets.php` file in your theme folder. In other themes, you can use the `functions.php` file instead, adding the code to the bottom of your file.

The widget we’re going to create in this tutorial is a Twitter widget. We’ll use the Twitter JavaScript badge to display the posts in an `li` tag. So here’s the code I’ve exported as a JS badge from Twitter for my account:

<div id="twitter_div">
<h2 class="twitter-title">Twitter Updates</h2>
<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>

You can do the same for your twitter account, or just modify the above to have your username (instead of `1jh`) and the number of entries to display (`count=5`).

Now that you’ve got a snippet of code personalised to your Twitter account, open `includes/widget.php` (or `functions.php` per the above paragraph) and add a new function at the bottom of the file:

function myTwitterWidget() {

}

For PHP newbies, this is just a function which will hold the code for our widget. After we’ve added our widget, we will be telling WordPress to recognise it as a widget. For now, we need to add our code in from earlier:

function myTwitterWidget() {

	?>
    <div id="twitter_div">
<h2 class="twitter-title">Twitter Updates</h2>
<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>
    <?php

}

(Note the `?>` and `<?php` tags before and after our snippet, you must add these else you will get errors.)

Now let’s strip down the code and modify it to work for our widget:

		<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>

This seems like a lot of formatting, but it ensures that you get a nice clean widget in your theme, which is compatible between themes too.

So, you should now have the following code:

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

}

One last line is needed which tells WordPress to include the widget in the widgets list:

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

You can change the first parameter to describe your Twitter widget how you like. The second refers to the name of the function which holds our widget. Note that this line must be outside of the funtion (see below).

So our final code:

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

In the next tutorial we’ll look at how you can add options to your widgets which you can change from within the WordPress Admin Panel.