Building An Awesome Flickr Widget: Screencast Included

Building An Awesome Flickr Widget: Screencast Included

on Sep 28th 2011 with 14 comments
Tutorial Details
  • Program: WordPress
  • Version (if applicable): 3.0 and higher
  • Difficulty: Beginner
  • Estimated Completion Time: 10 minutes
Download Source Files

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.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://thelordraimonds.info Raimonds

    No download link for screencast? :(

    Good article (:

  • http://aonemovies.com tanveer

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

  • Etrimon

    Thank you for this tutorial!

    Very nice and clearly understandable :-)

  • http://heyitsgeorge.com George Gecewicz

    Thanks guys!

  • http://risepk.com Faiz Muhammad

    wow great tutorial

    • http://www.heyitsgeorge.com/ George Gecewicz

      Thanks Faiz, glad you liked it :)

    • Krishna

      I needed to send you a litlte note to thank you very much once again for all the splendid advice you have documented on this page. This is really shockingly open-handed of people like you to supply extensively what a few individuals might have marketed as an ebook to earn some dough for themselves, principally seeing that you could have tried it if you ever desired. The advice additionally worked as a good way to recognize that other people online have similar desire similar to my very own to know much more with regard to this matter. I’m sure there are many more enjoyable occasions in the future for individuals who browse through your blog

  • http://zslabs.com Zach

    Thanks for the great tutorial, very useful!

    • http://www.heyitsgeorge.com/ George Gecewicz

      Thanks man! Glad you liked it.

  • Shelly Furio

    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!

  • Shelly Furio

    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!

    • http://heyitsgeorge.com George Gecewicz

      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/

  • http://flashalexander.com Flash Buddy

    Common sense tells me there may be a way to add another input field to the widget and allow the user to set how many photos to display. I was poking around snipplr.com:

    http://snipplr.com/search.php?q=flickr&btnsearch=go

    How about fading in and out the returned photos with some javascript or ???

    Yes, you have unlocked great potential with this widget, and taking us down the path of logical coding sequence with neat tidy code was a joy ride.

  • http://twitter.com/nicolapagani Nicola Pagani

    Hi, great article!

    How can I make it a multi-istance plugin?

    Thanks