Free WordPress Zootool Widget

Written by Arjan Terol on | Tiny Url

We have been using the WordPress Zootool plugin since 2011 for clients who wanted to display their latest zoo’s on their websites and we must say we have been impressed with it. It replaced your bookmark folders in all the browsers you used. Johannes Lauter is a programmer and did an awesome job developing the WordPress Zootool plugin.

Zootool is about collecting, organizing and sharing your favorite images, videos, documents and links from all over the internet.

Free WordPress Zootool Widget

However unfortunately Johannes Lauter’s good work didn’t fit into all our clients websites because they wanted to show more than just one badge of their zoo’s. More recently due to the Zootool WordPress plugin no longer being updated, it now could have conflicts working with the newer updates in WordPress. We were forced to look for something else or to create our own Zootool WordPress widget. We decided to create our own.

We wanted a widget that would display 9 of the most recent thumbnails of a Zootool account holders collection. In order for this to happen, we based the output on the Flickr widget. Here is the code for the free WordPress Zootool Widget we came up with. Feel free to download and change the widget until it fits your needs. Have fun with it!

Learn more on zootool.com.

<?php
      // Epic Monkeez - ZOO WIDGET v.1
      // http://epic.dev

class Zootool_Widget_Framework extends WP_Widget {
      function Zootool_Widget_Framework() {
      $widget_ops = array('classname' => 'zootool_widget_framework', 'description' => __( 'Epic Monkeez - 
      Zootool v.1.0') );
      $this->WP_Widget('zootool_widget_framework', __('ZOZ Framework - Zootool v.1.0'), $widget_ops);
      }

 function widget($args, $instance) { 
      extract( $args );
      $default = array('widget_title' => __('Latest from Zootool','epicmonkeez'), 'id' => '', 'qty' => 9 ); 
      $instance = wp_parse_args($instance, $default); 
      $widget_title = $instance['widget_title'];
      $id = $instance['id'];
      $qty = $instance['qty'];
      $size = $instance['size'];

     // WIDGET OUTPUT
      echo $before_widget;
      ?>
  <?php if(!empty($widget_title)){ echo "<h3 id=\"zoo_title\">" .$widget_title. "</h3>" ;} ?>
  <div id="zootool-badge">
	  <script type="text/javascript">
	      var url = 'http://zootool.com/badge/<?php echo $id; ?>/?count=<?php echo $qty; ?>&size=<?php echo $size; ?>';
	      (function() {
		      var zb = document.createElement('script');
		      zb.src = url;
		      zb.setAttribute('async', 'true');
		      document.documentElement.firstChild.appendChild(zb);
	      })();
	  </script>
	  <p><a rel="nofollow" class="zoo thumbnail" href="http://www.zoo.com/photos/<?php echo $id; ?>/">More Zoo Pages</a></p>
  </div>

  <?php echo $after_widget; 
      }

function update($new_instance, $old_instance) { 
	      $instance = $old_instance;
	      $instance['widget_title'] = strip_tags($new_instance['widget_title']);
	      $instance['id'] = $new_instance['id'];
	      $instance['qty'] = $new_instance['qty'];
	      $instance['size'] = $new_instance['size'];
	      return $instance;
      }

function form($instance) {
	      $default = array('widget_title' => __('Latest from Zootool','epicmonkeez'), 'id' => '', 'qty' => 9 );
	      $instance = wp_parse_args($instance, $default);
	      $widget_title = $instance['widget_title'];
	      $id = $instance['id'];
	      $size = $instance['size'];
	      $qty = $instance['qty'];
      ?>

  <input style="display:none;" type="text" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $title; ?>" />

  <p>Widget title: <input class="widefat" type="text" name="<?php echo $this->get_field_name('widget_title'); ?>" value="<?php echo $widget_title; ?>" /></p>
  
  <p>Enter ID of your Zootool account: <input class="widefat" type="text" name="<?php echo $this->get_field_name('id'); ?>" value="<?php echo $id; ?>"; /></p>

  <p>Enter the size of the media thumbnails: <input class="widefat" type="text" name="<?php echo $this->get_field_name('size'); ?>" value="<?php echo $size; ?>"; /> </p>

  <p>Display up to: <input class="widefat" type="text" name="<?php echo $this->get_field_name('qty'); ?>" value="<?php echo $qty; ?>" /> pages.</p>
  <?php
      }
}

add_action('widgets_init', create_function('', 'return register_widget("Zootool_Widget_Framework");'));
?>

Add the following line of code to your functions.php in your theme:

include_once( TEMPLATEPATH . '/zootool.php' );

For the styling we used the css provided by Zootool Tools.

<style>
#zootool-badge {
    line-height:0px;
}

#zootool-badge img {
    height:60px;
    width:60px; border:0;
}

#zootool-badge ul {
    list-style:none;
    padding:0;
    margin:0;
}

#zootool-badge li {
    background:rgb(33,33,33);
    height:60px;
    width:60px;
    border:0;
    margin:0 10px 10px 0; 
    float:left;
    list-style:none; 
    padding:0;
}
</style>

Download the latest version from GitHub | Current version: 1.0


Reference:

Tags: