This theme tutorial applies to the following themes:

All Themes

How to create widgets for your themes

Posted by Mark Forrester on 12 Sep 08

<br />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.

4 Comments For This Post

  1. Spencer

    Wow that’s awesome. :) Really nice. I’m looking forward to the next one. :D

  2. Lostkore

    Great Tutorial!
    I wrote a while ago a tutorial on how to get and use the last.fm feeds to display them in your blog/website. So it would be easy to transform it into a widget.

  3. Dainis Graveris

    Hey, nice tutorial! Thanks for sharing! :)

  4. Kredit

    I have this site bookmarked. Thanks from Kredit

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.