How to add Flickr Gallery Widget to WordPress without plugin

Flickr is one of the biggest photo-sharing websites. You can easily add Flickr gallery into WordPress with all the available Flickr WordPress plugins such as Quick Flick Widget or Flickr API widget but today I am going to show you how to add multiple instances of Flickr Gallery widget into your WordPress Theme without plugins.

Thanks to Gwyneth Liewlyn for bringing this Flickr user vs groups issue so I can apply it to the release of the next theme for our responsive themes collection

[notice type=”info”]If you’re using one of our Responsive WP Theme, just replace the below code with the similar code in lib/function/widget-functions.php[/notice]

1. Add this code to functions.php

Copy Pastebin – http://pastebin.com/BfRmgECc

or this below code

[php]///////////////////////////////////////////////////////////////////////////////////
//// Flickr Widget
///////////////////////////////////////////////////////////////////////////////////
class My_THEME_Flickr_Widget extends WP_Widget {
function My_THEME_Flickr_Widget() {
//Constructor
parent::WP_Widget(false, $name = TEMPLATE_DOMAIN . ‘ | Flickr’, array(
‘description’ => __(‘Displays your latest Flickr feed.’, TEMPLATE_DOMAIN)
));
}
function widget($args, $instance) {
// outputs the content of the widget
extract($args); // Make before_widget, etc available.

$fli_name = empty($instance[‘title’]) ? __(‘Flickr’, TEMPLATE_DOMAIN) : apply_filters(‘widget_title’, $instance[‘title’]);
$fli_type = $instance[‘type’];
$fli_id = $instance[‘id’];
$fli_number = $instance[‘number’];
$unique_id = $args[‘widget_id’];

echo $before_widget;
echo $before_title . $fli_name . $after_title; ?>
<ul id="flickr-widget">
<li>

<?php if($fli_type == ‘user’): ?>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=<?php echo $fli_number; ?>&display=latest&size=s&layout=x&source=user&user=<?php echo $fli_id; ?>"></script>
<?php else: ?>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=<?php echo $fli_number; ?>&display=latest&size=s&layout=x&source=group&group=<?php echo $fli_id; ?>"></script>
<?php endif; ?>

</li>
<li class="flickrmore"><small><a style="font-weight: normal; letter-spacing: normal; font-size: 11px;" href="http://www.flickr.com/photos/<?php echo "$fli_id"; ?>"><?php _e("More in Flickr »", TEMPLATE_DOMAIN); ?></a></small></li>
</ul>

<?php echo $after_widget; ?>
<?php }

function update($new_instance, $old_instance) {
//update and save the widget
return $new_instance;
}
function form($instance) {
// Get the options into variables, escaping html characters on the way
$fli_name = $instance[‘title’];
$fli_type = $instance[‘type’];
$fli_id = $instance[‘id’];
$fli_number = $instance[‘number’];
?>

<p>
<label for="<?php echo $this->get_field_id(‘title’); ?>"><?php _e(‘Flickr Name’,TEMPLATE_DOMAIN); ?>:
<input id="<?php echo $this->get_field_id(‘title’); ?>" name="<?php echo $this->get_field_name(‘title’); ?>" type="text" class="widefat" value="<?php echo $fli_name; ?>" /></label></p>

<p>
<label for="<?php echo $this->get_field_id(‘type’); ?>"><?php _e(‘Flickr Type:’, TEMPLATE_DOMAIN); ?></label>
<select id="<?php echo $this->get_field_id(‘type’); ?>" name="<?php echo $this->get_field_name(‘type’); ?>">
<option<?php if($fli_type == ‘user’) { echo " selected=’selected’"; } ?> name="<?php echo $this->get_field_name(‘type’); ?>" value="user"><?php _e(‘user’, TEMPLATE_DOMAIN); ?></option>
<option<?php if($fli_type == ‘group’) { echo " selected=’selected’"; } ?> name="<?php echo $this->get_field_name(‘type’); ?>" value="group"><?php _e(‘group’, TEMPLATE_DOMAIN); ?></option>
</select>
</p>

<p>
<label for="<?php echo $this->get_field_id(‘id’); ?>"><?php _e(‘Flickr ID’,TEMPLATE_DOMAIN); ?>(<a target="_blank" href="http://www.idgettr.com">idGettr</a> ex: 52617155@N08):
<input id="<?php echo $this->get_field_id(‘id’); ?>" name="<?php echo $this->get_field_name(‘id’); ?>" type="text" class="widefat" value="<?php echo $fli_id; ?>" /></label></p>

<p>
<label for="<?php echo $this->get_field_id(‘number’); ?>"><?php _e(‘Number of photos:’,TEMPLATE_DOMAIN); ?>
<input id="<?php echo $this->get_field_id(‘number’); ?>" name="<?php echo $this->get_field_name(‘number’); ?>" type="text" class="widefat" value="<?php echo $fli_number; ?>" /></label></p>

<?php
}
}
register_widget(‘My_THEME_Flickr_Widget’);[/php]

2. Add the necessary CSS for the Flickr widget

You can add this to your theme style.css

[css]
#flickr-widget .flickr_badge_image { background: transparent none; border: 0px none; float:left; margin: 0 5px 5px; }
#flickr-widget li { width:100%;margin:0px !important;padding:0px !important; }
[/css]

3. Setup the Flickr in admin widget.php

After applying the code, you can go to wp-admin/widget.php and set up the new Flickr widget. First, click on the idGettr to copy-paste your desired Flickr full path URL into the text field. Select your Flickr type for user or groups.

If you want to use username Flickr profile URL, use full path like
[highlight color=”#333″ bgcolor=”#eee”]http://www.flickr.com/photos/your-username[/highlight]

If you want to use groups Flickr profile URL, use full path like
[highlight color=”#333″ bgcolor=”#eee”]http://www.flickr.com/groups/your-group-name[/highlight]

after getting the id like 80641914@N00 or 33441914@N00, copy-paste the code to the widget Flickr ID text field.

complete all the empty text field settings and save.

4. See the end results

After saving the Flickr widget setting in the admin dashboard, you should see the Flickr widget appeared in your widget section in themes. In my case, I used 2 different Flickr gallery IDs, one for users and one for groups.

Final Conclusion

We hope that this article helped you quickly add a Flickr widget in the WordPress sidebar and widget areas. Did you find any other method similar to this? Which one is it? Let us know by leaving a comment below.