Integrating Flickr Into Your WordPress Theme

I've gotten a couple of emails from some readers asking how I went about displaying some of my latest flickr photos on my sidebar. So for any WordPress bloggers out there looking to customize your current WordPress theme to include your flickr thumbnails, read on!

1. Minimize your coding efforts using a plugin
   Instead of wasting unnecessary time coming up with a solution using PHP to tap into your flickr RSS feed, use one of the many WordPress plugins out there. I use the flickrRSS plugin by Dave Kellam, and it's a really well designed plugin. You can assign HTML tags before and after each thumbnail which will allow us to easily style the thumbnails later on in our stylesheet.
2. Install the plugin
   Install the flickrRSS plugin to your WordPress blog. If you're unsure how to install the plugin, there should be a readme that came along with it to help you along.
3. Configure the plugin
   
   For the flickrRSS plugin, you can configure its settings in the Options tab of your WordPress admin panel. Here, you will be able to assign the account it will grab the RSS feed from, as well as add HTML tags before and after each thumbnail.
4. Implement the plugin into your theme
   Although you installed a plugin which will display thumbnails from your flickr feed, you still have yet to put a call to the plugin in the theme. Find a spot in your theme's template and add the following snippet:
   <?php if (function_exists('get_flickrRSS')) { ?>
           <ul class="flickrtable">
                   <?php get_flickrRSS(); ?>
           </ul>
   <?php } ?>

   The call to the plugin is from the get_flickrRSS(); line. An if statement was added before the call just in case the plugin poops out or you deactivate it. You'll also notice I added an unordered list tag before and after the call with the class flickrtable. This allows us to pinpoint our styling in our stylesheet later.

5. Styling your thumbnails
   Now without any CSS, your flickr thumbnails will probably show up as a list, with bullets. To change this, add the following to your stylesheet:
   .flickrtable {
           margin: 0px auto;
           list-style-type: none;
   }

   .flickrtable li {
           text-align: center;
           border: 1px solid #b9b9b9;
           padding: 5px 7px 5px 5px;
           background: #fff;
           margin-bottom: 10px;
           display: block;
           float: left;
           margin-left: 5px;
           margin-right: 5px;
           width: 75px;
   }

   .flickrtable li img {
           border: 1px solid #b9b9b9;     
   }

   The above CSS will style your flickr thumbnails exactly like mine. If you'd like to change the colors of the borders or even do some funkier stuff with it, please go ahead and edit the above CSS. For more CSS tips, W3 Schools is a great resource.