Building An Awesome Flickr Widget: Screencast Included


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.


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:
Description: Blah...
Version: 1.0
Author: George Gecewicz
Author URI:

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.

Related Posts
  • Code
    Distributing Your Plugins in GitHub with Automatic UpdatesSensorsthumbnail
    This article will teach you that, with a little creative coding, you can host your own WordPress plugins in GitHub while still retaining the automatic update feature.Read More…
  • Code
    Integrating Owl Carousel Into a WordPress Plugin: Preparing Our WorkspaceOwl carousel
    This is the second part of step-by-step tutorial on plugin development. As you may remember, in previous part we have discussed the concept of the plugin and defined the plan of development process. I you have not read the first part of tutorial, I recommending reading that article prior to moving forward with this tutorial. In this part, we are going to prepare our workspace to make it as easy as easy as possible to continue working on our plugin. We’ll define what we need for work and create the structure of the plugin according to its functionality. In the end you will see your plugin activated in Dashboard. So, let’s start.Read More…
  • Code
    Creative Coding
    Adding Custom UI Themes to Wordpress Admin Using SassPreview image@2x
    With the release of WordPress 3.8 we now have a new feature for Admin UI themes. This means that every user can change the color scheme of his admin regardless of the the theme that’s being used on the front-end. To change the color scheme of your admin, go to Users > Your Profile. Here you’ll see eight predefined themes that you can select from. Select any theme from these themes and you’ll see the changes immediately. When you are done with selecting the theme, hit the “Update Profile” button.Read More…
  • Code
    Creative Coding
    Redirect Users to Custom Pages by RoleRedirect 400
    WordPress is being used more and more as a web application framework. With that use case comes a bunch of extra circumstances that WordPress doesn't cover. Do you really want your application users to see the WordPress admin? In my web application development experience, the answer to that question is usually "no." Today I'm going to teach you how to redirect a user based on their role to a custom page in WordPress.Read More…
  • Code
    Displaying Information of a Plugin on Your WebsiteWordpressdotorg plugin api border 400
    In the first part of this article, we discussed how to use built-in functions to communicate with and retrieve plugin details. In this tutorial we will put the theory in action to create a simple plugin which will allow us to display details of any plugin hosted on on our WordPress website using shortcodes.Read More…
  • Code
    Creative Coding
    A Look at the WordPress HTTP API: A Practical Example of wp_remote_postDiagram http api
    In the previous article, we reviewed the previous articles regarding GET requests, the native PHP facilities for making requests, and reviewed WordPress wp_remote_post API function along with the arguments that it offers. In this article, we're going to make use of wp_remote_post such that we're actually able to see it in action. Remember that this - like wp_remote_post - is part of the HTTP API of which there are other functions worth reviewing. But, for now, we're going to put wp_remote_post to work. Specifically, we're going to do the following: When the page loads, we're going to submit some information to a custom script The script will examine the information and return it to our page We'll then display the data on the page Sure, it's a bit of a contrived example but it will give us the experience of creating a separate PHP script that can be used for operations triggered by the use of wp_remote_post. Anyway, for the purposes of this example, we are going to use the PHP $_SERVER collection to log when the user has submitted their preference rather than require that they have logged in. Finally, the source code will be made available on GitHub and accessible at the end of this series in the following article. For now however, let's get started with working on the plugin.Read More…