Get $500+ of the best After Effects files, video templates and music for only $20!
Building An Awesome Flickr Widget: Screencast Included

Building An Awesome Flickr Widget: Screencast Included

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.

Add Comment

Discussion 11 Comments

  1. Raimonds says:

    No download link for screencast? :(

    Good article (:

  2. tanveer says:

    Thanks for this tutorial. It solve my prblm……….

  3. Etrimon says:

    Thank you for this tutorial!

    Very nice and clearly understandable :-)

  4. Zach says:

    Thanks for the great tutorial, very useful!

  5. Shelly Furio says:

    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!

  6. Shelly Furio says:

    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/

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.