Advertisement

Building An Awesome Flickr Widget: Screencast Included

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

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.