How to add Flickr Gallery Widget to WordPress without plugin

flickr-function-code

Flickr is one of biggest photo sharing website. You can easily add flickr gallery into WordPress with all the available Flickr WordPress plugin such Quick Flick Widget or Flickr API widget but today i am going to show you how to add multiple instances 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 to next themes release for our responsive themes collection

If you’re using one of our Responsive WP Theme, just replace the below code with the similiar code in lib/function/widget-functions.php

1. Add this code to functions.php

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

or this below code

///////////////////////////////////////////////////////////////////////////////////
//// 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; ?>&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;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; ?>&amp;display=latest&amp;size=s&amp;layout=x&amp;source=group&amp;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 &raquo;", 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');

2. Add the necessary css for the Flickr widget

You can add this to your theme style.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; }

3. Setup the Flickr in admin widget.php

After applied the code, you can go to wp-admin/widget.php and setup the new Flickr widget. First click on the idGettr to copy paste your desired flickr full path url into the textfield. Select your flickr type for user or groups.

If you want to use username flickr profile url, use full path like
http://www.flickr.com/photos/your-username

If you want to use groups flickr profile url, use full path like
http://www.flickr.com/groups/your-group-name

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

flickr-widget-panel

complete all the empty textfield setting and save.

4. See the end results

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

Groups Flickr

Groups Flickr

User Flickr

User Flickr

Final Conclusion

We hope that this article helped you quickly add a flickr widget in 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.

How to add Flickr Gallery Widget to WordPress without pluginhttp://www.magpress.com/wp-content/uploads/2013/04/flickr-without-wp-plugin.jpghttp://www.magpress.com/wp-content/uploads/2013/04/flickr-without-wp-plugin-170x150.jpg Ronald
Flickr is one of biggest photo sharing website. You can easily add flickr gallery into WordPress with all the available Flickr WordPress plugin such Quick Flick Widget or Flickr API widget but today i am going to show you how to add multiple instances Flickr Gallery widget into your...
<img style='border:1px solid #ddd;' src="http://www.magpress.com/wp-content/uploads/2013/04/flickr-function-code.jpg" alt="flickr-function-code" width="500" height="233" class="alignnone size-full wp-image-3650" /> <strong><a href="http://flickr.com" title="photo sharing community" target="_blank">Flickr</a></strong> is one of biggest photo sharing website. You can easily add flickr gallery into WordPress with all the available Flickr WordPress plugin such <a href="http://wordpress.org/extend/plugins/quick-flickr-widget/" title="Flickr WordPress Plugins" target="_blank">Quick Flick Widget</a> or <a href="http://www.wordpress.org/extend/plugins/flickr-api/" title="Flickr WordPress Plugins" target="_blank">Flickr API widget</a> but today i am going to show you how to add <strong>multiple instances</strong> Flickr Gallery widget into your WordPress Theme without plugins. Thanks to <a href="http://www.magpress.com/profile/gwyneth-llewelyn/" target="_blank">Gwyneth Liewlyn</a> for bringing this <a href="http://www.magpress.com/forums/topic/does-the-embedded-flickr-widget-support-flickr-groups" title="flickr user and groups api widget" target="_blank">flickr user vs groups</a> issue so i can apply to next themes release for our <a href="http://www.magpress.com/tag/responsive" title="Best Free Responsive WordPress Theme">responsive</a> themes collection <h2>1. Add this code to functions.php</h2> Copy Pastebin - <strong>http://pastebin.com/BfRmgECc</strong> or this below code <h2>2. Add the necessary css for the Flickr widget</h2> You can add this to your theme style.css <h2>3. Setup the Flickr in admin widget.php</h2> After applied the code, you can go to wp-admin/widget.php and setup the new Flickr widget. First click on the <a href="http://www.idgettr.com/" title="get flickr id with dull path url" target="_blank">idGettr</a> to copy paste your desired flickr full path url into the textfield. Select your flickr type for user or groups. If you want to use username <strong>flickr profile</strong> url, use full path like<br /><em></em> If you want to use groups <strong>flickr profile</strong> url, use full path like<br /><em></em> after getting the id like 80641914@N00 or 33441914@N00, copy paste the code to the widget Flickr ID textfield. <img src="http://www.magpress.com/wp-content/uploads/2013/04/flickr-widget-panel.png" alt="flickr-widget-panel" width="352" height="457" class="alignnone size-full wp-image-3646" /> complete all the empty textfield setting and save. <h2>4. See the end results</h2> After saving the Flickr widget setting in admin dashboard, you should see the Flickr widget appeared in your widget section in themes. In my case, i used 2 different flickr gallery id, one for user and one for groups. <h3>Final Conclusion</h3> We hope that this article helped you quickly add a flickr widget in 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.

3 Comments Already

  1. very nice tutorial, it work great but need a bit css edits on my theme. thanks for making it multi-instance for my multiple flickr gallery group.

    Public CommentUservery nice tutorial, it work great but need a bit css edits on my theme. thanks for making it multi-instance for my multiple flickr gallery group.
  2. Great tutorial ron, just replace the flickr code in theme and now able to choose the group pool flickr. thx

    Member of MagPressSubscriberGreat tutorial ron, just replace the flickr code in theme and now able to choose the group pool flickr. thx
  3. @jerry – you’re welcome. yes some theme may need to adjust the css a bit..

    @michael69 – thanks. i missed the group pool settings selection early on the flickr widget coding.

    Member of MagPressAdministrator@jerry - you're welcome. yes some theme may need to adjust the css a bit.. @michael69 - thanks. i missed the group pool settings selection early on the flickr widget coding.

Leave a Reply

Please note: Do not SPAM this comment form, all links will be delete immediately

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>