Tutorial Details
- Program: WordPress
- Version (if applicable): 3.0 and higher
- Difficulty: Beginner
- Estimated Completion Time: 10 minutes
WordPress’s Widget API makes building widgets for WordPress a breeze. With four simple yet powerful functions, you can generate a lovely little form for the user, grab whatever the user enters, store that information, and use it elsewhere to generate some awesome code.
Introduction
Today, we’re going to look at using this process to generate some jQuery that pulls in images from a Flickr account. This particular widget is super simple and probably not something you’d release as a full WordPress plugin, but it’ll hopefully get you comfortable with the Widget API and the flexibility it has.
Getting Started
First, we need to understand that we’re making a *plugin* for WordPress. This is helpful in development because, well, if something goes wrong, and we’ve left everything else alone, we know definitively that our plugin caused the problem. This is immensely helpful in finding and addressing bugs. So, all of our code is going to be in the `wp-content/plugins` directory, in whatever directory you make for your own widget (ours is `wp-tuts-flickr`, making our complete path `wp-content/plugins/wp-tuts-flickr`).
In our new directory, we make a PHP file and name it something that makes sense for our plugin. Then we can open up some good ol’ PHP tags, fill in some meta information like the plugin name, etc., and get to work!
Check out the example meta information below.
` /* Plugin Name: WPTuts Flickr Plugin URI: http://wp.tutsplus.com Description: Blah... Version: 1.0 Author: George Gecewicz Author URI: http://heyitsgeorge.com */ `
This is the beginning of our plugin. Now comes the fun stuff, where we get to code our widget and enjoy some Flickr awesomeness. Check out the screencast below on how to do that, and the full code from the screencast is at the top (download source files). Remember that this is just an introduction to building widgets, and you can really do a lot more advanced stuff than what you’ll learn in this tutorial. I suggest reading more about the Widget API and looking at some other popular widget plugins to get an idea of how powerful the API really is.
The Video Tutorial
Screencast: Flickr Widget
Thanks for reading! If you have any questions, comments, or concerns, I’m happy to try and help in the comments.


No download link for screencast?
Good article (:
Thanks for this tutorial. It solve my prblm……….
Thank you for this tutorial!
Very nice and clearly understandable
Thanks guys!
wow great tutorial
Thanks Faiz, glad you liked it
Thanks for the great tutorial, very useful!
Thanks man! Glad you liked it.
FINALLY a tutorial that explains every tiny piece of code for those of us who are still learning PHP/jQuery! Thank you!! Please make more tutorials George!
Does anyone know how to add a post count variable to this widget? I’m still very new to jquery and I’ve experimented with adding count= in different places in the script but I’m not having any luck… Suggestions? Thanks!
Hi Shelly! Thank you for the kind words, I’m glad I could help
For the count issue you’re mentioning here, do you mean something that displays “5 Photos” or something like that?
If so, you can use .length(); in jQuery.
So if you echo out Flickr images in an <ol> with the class of .flickr-images, and each image is a <li>, you can use .length() to count how many <li> there are.
Then make a <span> or <p> somewhere in your widget output.
Store your .length() action in a variable, let’s say photoCount. Then you can target the <span> or <p> you made and do something like this:
$(“…span or p here…”).html(photoCount + “Photos”);
Learn more about .length(); here: http://api.jquery.com/length/