You are searching for jQuery sliders? Search no more, here we have composed a list of the best slider that you can find on the internet. Some of them are free and very customizable and some of them are worth spending some money to achieve your goal.

Rhinoslider

This slider offers many different effects, you can use the generator to create your slider so you don’t spend a lot of time customizing your options.

Nivo

The slider has a lot of cool effects you can get the free version or you can get one of the paid ones. It has very nice documentation and its very easy to implement.

Slidedeck

Slidedeck offers a fully paid version only you have 3 options and tons of cool options and also you get a WordPress plugin for your money.

Easy Slider

It’s free and basic, but if you are comfortable with jQuery and you need to extend the slider to create something that you can’t find on the internet this is the way to go. We have extended the script in so many ways and it never failed us before.

Wowslider

Offers a free version for noncommercial usage. There a lot of good examples on the site, good documentation so you don’t get lost and most important thing, it can fit in any design.

Unslider

Free responsive slider that is very easy to use, it has all the options you will need. It can be used for mobile, it supports touch events if you use jQuery.event.swipe in combination with it.

Camera

Thumbnail preview, cool effects good documentation all you need to implement is just to download the files and take a look at the documentation.

Bookmark and Share

Easy List Splitter

Easy list splitter can be very useful when you need to split some lists like some mega menu on the fly. It’s very easy to use  just follow the instruction on the site.

To download the plugin go here.

Wookmark jQuery Plugin

If you are struggling on how to build this kind of a layout take a look at this Jquery plugin.

Check out the demo here.

qTip

A useful tooltip plugin that can save you a lot of time when you need to build an app that is using a lot of tooltips.

Take a look at the site here.

jQuery Countdown

The beast free countdown timer. If you are getting your site ready to go live or you have some event in the future you can get this script to countdown the time that is left.

Take a look at the documentation here.

jQuery Validate

Coding a validation for HTML forms can be boring and time consuming. This script will cut the time for coding and make your life better.

Take a look at the site here.

Bookmark and Share

In this article I am going to present you one of the best CSS frameworks you can find. When starting a new project as a frontend developer you will always have to face the fact that you will have to write a lot of CSS just to achieve the basic structure of the site. Creating different templates with one or multiple columns can be time consuming, well not anymore. To shorten the time and the testing of the CSS you have done we are going to look over some of the most popular CSS frameworks.

Twitter Bootstrap

Bootstrap comes with 940 pixel grid system it works in all the major browsers, it has a nice set of predefined UI elements that can come handy. You can customize the framework before you download the files and you can find all the things documented if you run in some problems. Overall I think that this is one of the most compete CSS frameworks you can find on the net.

Go to Bootstrap.

 960 CSS Framework

960 is a CSS framework that will ease your effort when working with 960 pixels layout sites and it will provide 12 or 16 column, which can be used separately or in tandem. To find more info go to 960 site and read the documentation and take a look at the demos.

Go to 960.

Blueprint

The Blueprint framework was developed By a student from Norway and this is considered to be one of the strongest CSS frameworks. It offers a CSS platform and typographic grids, the framework aims to considerably reduce the development time. Blueprint offers a user friendly generator that can be used to generate frames based on the width you input. To see more info visit the site.

Go to Blueprint.

Overall using CSS grids can be helpful for big project, it can cut development time and decries the number of cross browser bugs. Always choose wisely do your research before you jump in, sometimes doing it from scratch is the best way to go.

Bookmark and Share

Border radius

Border radius is one of the most used CSS properties, but to achieve the desired effect you have to type a bunch of code so can get it to work in all browsers. This tool will allow you to do this in seconds, just type the value you like and it will generate the code for you.

Go to Border Radius.com

Box shadow

Create box shadow effects in second with Box shadow tool, just add the values you like and you are set to go.

Go to Box Shadow

Sprite Tool

Sprite cow Is one of the easiest ways to generate your css code when you are using sprites in a web site. Upload your sprite image or see the example, with this tool you are going to speed up the process of making time consuming and boring sprites.

Go to Sprite Cow.com

Button Maker

CSS allows us to make awesome buttons. Here is a generator that will give you the ability to create the button you what in seconds no need to type the code just play around till you get the desired effect.

Go to Button Maker

Gradient Generator

Here you can generate CSS for gradients, pick the colors you like take a look at the preview and copy the code. Very easy to use.

Go to Gradient Generator

All in one CSS3 generator

All in one place, if something is missing from above you will find it here.

Go to CSS3 generator

Font Face Generator

Here you can generate font face css code for your free font, upload the font file and download your font kit. Also you can find a lot of free fonts for download.

Go to Font Squirrel.com

Bookmark and Share

In this tutorial we will create a simple Flicker widget using the Flicker API and the WordPress widget API. The widget can be used multiple times and it will require your Flicker ID and the number of images to display. If we search for something like this we can find a tons of premade widgets, but nothing can be more fun than making it yourself.

Introduction

Flicker is the most popular photo service out there. By creating the Flicker widget you will learn how to use the Flicker API and how to create WordPress widgets.
You can download the widget here

  1. Create a folder flicker_widget in your plug-ins dir.
  2. Create a php file and name it flicker_widget.php.

Step 1 – Create the widget extend class.

From WordPress 2.8 we can copy and paste the widget skeleton code.

	class flickr_widget extends WP_Widget {
    function flickr_widget() {
    parent::WP_Widget(false, $name = 'Flickr Widget');
    }
    
    function form($instance) {
    }
    
    function update($new_instance, $old_instance) {
    }
    
    function widget($args, $instance) {
    }
    
    }
    
    add_action( 'widgets_init', 'fw_load_widgets' );
    function fw_load_widgets() {
    register_widget('flickr_widget');
    }

Step 2 – Making the form.

Before we can make the widget form we need to figure out the input fields that we will use in this widget.

We will need a text filed for the title, the Flicker id and the number of items to display. Copy and paste the code in the form() function.

	$title = esc_attr($instance['title']);
    $flickr_user_id = esc_attr($instance['flickr_user_id']);
    $flickr_img_limit= esc_attr($instance['flickr_img_limit']);
    ?>
    <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('flickr_user_id'); ?>"><?php _e('Enter Flickr ID:'); ?> <input id="<?php echo $this->get_field_id('flickr_user_id'); ?>" name="<?php echo $this->get_field_name('flickr_user_id'); ?>" type="text" value="<?php echo $flickr_user_id; ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('flickr_img_limit'); ?>"><?php _e('Enter Flickr Image Number:'); ?> <input id="<?php echo $this->get_field_id('flickr_img_limit'); ?>" name="<?php echo $this->get_field_name('flickr_img_limit'); ?>" type="text" value="<?php echo $flickr_img_limit; ?>" /></label></p>
    <?php

Step 3 – Making the form update.

To make the form update, you will need to setup your update() function. This should be very easy, by default WordPress sends two parameters in this function the new and the old instance. You don’t need to use the old instance since we don’t have values that we don’t want to change. Go ahead and paste this code in the update() function.

	return $new_instance;

Step 4 – Creating the costume function.

In the enclosure of the class we can add more functions then just the skeleton ones that can be used in the widget.

To make the code cleaner we can go and crate a function that will interact with the Flicker API and use it in the widget when required.

Go ahead and copy/paste the getFlickrs() function bellow the widget function.

	function getFlickrs($flickr_user_id, $flickr_img_limit = 10){
    $flickr_rss_url;
    if( file_exists( ABSPATH . WPINC . '/rss.php') ) {
    require_once(ABSPATH . WPINC . '/rss.php');
    } else {
    require_once(ABSPATH . WPINC . '/rss-functions.php');
    }
    if($flickr_user_id !=""){
    $flickr_rss_url = empty($options['flickr_rss_url']) ? __('http://flickr.com/services/feeds/photos_public.gne?id='.$flickr_user_id.'&format=rss_200') : $options['flickr_rss_url'];
    }
    if ( empty($items) || $items < 1 || $items > 10 ) $items = $flickr_img_limit;
    $rss = fetch_rss( $flickr_rss_url );
    if( is_array( $rss->items ) ) {
    $out = "";
    $items = array_slice( $rss->items, 0, $items );
    $nub = 0;
    while( list( $key, $photo ) = each( $items )  ) {
    preg_match_all("/<IMG.+?SRC=[\"']([^\"']+)/si",$photo[ 'description' ],$sub,PREG_SET_ORDER);
    $photo_url = str_replace( "_m.jpg", "_t.jpg", $sub[0][1] );
    if($nub == 2){
    $nub = 0;
    $out .= "<li class='margin-0'><a href='{$photo[ 'link' ]}'><img alt='".wp_specialchars( $photo[ 'title' ], true )."' title='".wp_specialchars( $photo[ 'title' ], true )."' src='".$photo_url."' border='0' width='75'></a></li>";
    continue;
    }else{
    $out .= "<li><a href='{$photo[ 'link' ]}'><img alt='".wp_specialchars( $photo[ 'title' ], true )."' title='".wp_specialchars( $photo[ 'title' ], true )."' src='".$photo_url."' border='0' width='75'></a></li>";
    }
    
    $nub ++;
    }
    }
    return $out;
    }

This function will receive two parameters, the id and the number of items $flickr_user_id, $flickr_img_limit.

In the function we need to include the WordPress rss file and create the flicker url variable.

After that we just loop thru the rss items and print out the html.

Step 5 – Making everything work.

The final step is to make the widget function print out our html.

Everything here is self explanatory and you need just to copy and paste the code in the widgets() function.

	$title = apply_filters('widget_title', $instance['title']);
    if ( empty($title) ) $title = false;
    if($title){
    echo $before_title;
    echo $title;
    echo $after_title;
    }
    echo $before_widget;
    
    if($instance['flickr_user_id'] != ""){
    echo $this->getFlickrs($instance['flickr_user_id'], $instance['flickr_img_limit']);
    }else{
    echo "Enter Flickr ID.";
    }
    echo $after_widget;

If you have nice images and you want to show it in your blog then this is a nice way of doing that.

Bookmark and Share

In the second part of this tutorial we will extend the widget with more options. Let’s start by defining what sort of options we want it to have.

  • Show timestamps
  • Discover Hyperlinks
  • Discover @replies
  • Discover avatar
  • Followers count

You can download the extended plug-in here.

Step 1: Getting the form ready for the new options

First of all we need to create the new options in the widget. Find the form() function and add the new form fields to it. Copy the code and add it at the end of the HTML.

<p><label for="<?php echo $this->get_field_id('timestamps'); ?>"><?php _e('Show timestamps:'); ?> <input id="<?php echo $this->get_field_id('timestamps'); ?>" name="<?php echo $this->get_field_name('timestamps'); ?>" type="checkbox" <?php if($timestamps!=""){ echo "checked='checked'"; } ?> /></label></p>
<p><label for="<?php echo $this->get_field_id('hyperlinks'); ?>"><?php _e('Discover Hyperlinks:'); ?> <input id="<?php echo $this->get_field_id('hyperlinks'); ?>" name="<?php echo $this->get_field_name('hyperlinks'); ?>" type="checkbox" <?php if($hyperlinks!=""){ echo "checked='checked'"; } ?> /></label></p>
<p><label for="<?php echo $this->get_field_id('replies'); ?>"><?php _e('Discover @replies:'); ?> <input id="<?php echo $this->get_field_id('replies'); ?>" name="<?php echo $this->get_field_name('replies'); ?>" type="checkbox" <?php if($replies!=""){ echo "checked='checked'"; } ?> /></label></p>
<p><label for="<?php echo $this->get_field_id('avatar'); ?>"><?php _e('Discover avatar:'); ?> <input id="<?php echo $this->get_field_id('avatar'); ?>" name="<?php echo $this->get_field_name('avatar'); ?>" type="checkbox" <?php if($avatar!=""){ echo "checked='checked'"; } ?> /></label></p>

These are all check boxes that will turn on/off the options in the widget.

Step 2: Making Sure Your Form is Saving the new options

To make the form save the new options that we added in the html we need to edit the form() and update() functions.

In the form() function add this in the code before the html of the form.

$timestamps = esc_attr($instance['timestamps']);
$replies = esc_attr($instance['replies']);
$hyperlinks = esc_attr($instance['hyperlinks']);
$avatar = esc_attr($instance['avatar']);

In the update function add this code just before return $instance;

$instance['timestamps']=$new_instance['timestamps'];
$instance['replies']=$new_instance['replies'];
$instance['hyperlinks']=$new_instance['hyperlinks'];
$instance['avatar']=$new_instance['avatar'];

Step 3: Creating the set of functions for the options

To make the new options we need to extend the BS_Twitter class by adding the new set of functions. All of the new functions will be added after the widget() function.

function bs_tweeter_hyperlinks($text) {

$text = preg_replace('/\b([a-zA-Z]+:\/\/[\w_.\-]+\.[a-zA-Z]{2,6}[\/\w\-~.?=&%#+$*!]*)\b/i',"<a href=\"$1\" class=\"twitter-link\">$1</a>", $text);

$text = preg_replace('/\b(?<!:\/\/)(www\.[\w_.\-]+\.[a-zA-Z]{2,6}[\/\w\-~.?=&%#+$*!]*)\b/i',"<a href=\"http://$1\" class=\"twitter-link\">$1</a>", $text);

$text = preg_replace("/\b([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})\b/i","<a href=\"mailto://$1\" class=\"twitter-link\">$1</a>", $text);

$text = preg_replace('/([\.|\,|\:|\Ў|\ї|\>|\{|\(]?)#{1}(\w*)([\.|\,|\:|\!|\?|\>|\}|\)]?)\s/i', "$1<a href=\"http://twitter.com/#search?q=$2\" class=\"twitter-link\">#$2</a>$3 ", $text);

return $text;

}

function bs_tweeter_users($text) {

$text = preg_replace('/([\.|\,|\:|\Ў|\ї|\>|\{|\(]?)@{1}(\w*)([\.|\,|\:|\!|\?|\>|\}|\)]?)\s/i', "$1<a href=\"http://twitter.com/$2\" class=\"twitter-user\">@$2</a>$3 ", $text);

$text =  preg_replace('/(^|\s)#(\w+)/', '\1#<a href="http://search.twitter.com/search?q=%23\2">\2</a>', $text);

return $text;

}

function bs_string_remover($tweet, $username) {

$string_length = strlen($username);

$tweet = substr_replace($tweet, '', 0, $string_length+1);

return $tweet;

}

function bs_twitter_followers_counter($username, $cache) {

$cache_file = $cache."/".md5($username);

if (is_file ( $cache_file ) == false) {

$cache_file_time = strtotime ( '1984-01-11 07:15' );

} else {

$cache_file_time = filemtime ( $cache_file );

}

$now = strtotime ( date ( 'Y-m-d H:i:s' ) );

$api_call = $cache_file_time;

$difference = $now - $api_call;

$api_time_seconds = 3600*24;

if ($difference >= $api_time_seconds) {

$api_page = 'http://twitter.com/users/show/' . $username;

$xml = file_get_contents ( $api_page );

$profile = new SimpleXMLElement ( $xml );

$count = $profile->followers_count;

if (is_file ( $cache_file ) == true) {

unlink ( $cache_file );

}

touch ( $cache_file );

file_put_contents ( $cache_file, strval ( $count ) );

return strval ( $count );

} else {

$count = file_get_contents ( $cache_file );

return strval ( $count );

}

}

function bs_relative_time( $timestamp ){

if( !is_numeric( $timestamp ) ){

$timestamp = strtotime( $timestamp );

if( !is_numeric( $timestamp ) ){

return "";

}

}

$difference = time() - $timestamp;

$periods = array( "sec", "min", "hour", "day", "week", "month", "years", "decade" );

$lengths = array( "60","60","24","7","4.35","12","10");

if ($difference > 0) { // this was in the past

$ending = "ago";

}else { // this was in the future

$difference = -$difference;

$ending = "to go";

}

for( $j=0; $difference>=$lengths[$j] and $j < 7; $j++ )

$difference /= $lengths[$j];

$difference = round($difference);

if( $difference != 1 ){

$periods[$j].= "s";

}

$text = "$difference $periods[$j] $ending";

return $text;

}

function bs_cache_avatar($username){

$cache_file =ABSPATH.'wp-content/plugins/bs_twitter/cache/'.md5($username).'.jpg';

if (is_file ( $cache_file ) == false) {

$cache_file_time = strtotime ( '1984-01-11 07:15' );

} else {

$cache_file_time = filemtime ( $cache_file );

}

$now = strtotime ( date ( 'Y-m-d H:i:s' ) );

$api_call = $cache_file_time;

$difference = $now - $api_call;

$api_time_seconds = 3600*24;

if ($difference >= $api_time_seconds) {

$xml = simplexml_load_file("http://twitter.com/users/".$username.".xml");

$ch = curl_init($xml->profile_image_url);

$fp = fopen($cache_file, "w");

curl_setopt($ch, CURLOPT_FILE, $fp);

curl_setopt($ch, CURLOPT_HEADER, 0);

curl_exec($ch);

curl_close($ch);

fclose($fp);

}

return get_bloginfo('url').'/wp-content/plugins/bs_twitter/cache/'.md5($username).'.jpg';

}

Let’s take a look at the functions one by one.

  • bs_tweeter_hyperlinks – will discover the hyperlinks in the content of the tweet and add the link to it.
  • bs_tweeter_users – will discover the users in the tweet content and add the link to the users profile on twitter.
  • bs_string_remover – will remove the users from the content when needed.
  • bs_twitter_followers_counter – is a function that will display the followers number also cache it so we don’t send requests to the twitter api every time we refresh the page on the front end
  • bs_relative_time – shows the tweet time in relative time.
  • bs_cache_avatar – displays your avatar before every tweet and also stores the image locally on your site.

Step 4: Displaying the new set of functionalities on the front end

In the widget function we need to change the code so we can display the new set of options that we created. To do this we will change the function completely. Just copy and paste the new widget function over the existing one.

function widget($args, $instance) {

extract($args);

$title = apply_filters('widget_title', $instance['title']);

if ( empty($title) ) $title = false;

$twitter_username = trim($instance['twitter_username']);

$number = absint( $instance['number'] );

$timestamps = esc_attr($instance['timestamps']);

$replies = esc_attr($instance['replies']);

$hyperlinks = esc_attr($instance['hyperlinks']);

$avatar = esc_attr($instance['avatar']);

$cache_path = ABSPATH.'wp-content/plugins/bs_twitter/cache';

if($title){

echo $before_title;

echo $title;

echo ' - <small>'.$this->bs_twitter_followers_counter($twitter_username, $cache_path)." Followers</small>";

echo $after_title;

}

echo $before_widget;

if (class_exists('SimplePie')) {

$feed = new SimplePie();

$feed->set_feed_url('http://www.twitter.com/statuses/user_timeline/'.$twitter_username.'.rss');

$feed->set_cache_location($cache_path);

$feed->enable_cache(true); //disable caching

$feed->set_cache_duration(1800); //The number of seconds to cache for. 60 is 1 minute, 600 is 10 minutes, 900 is 15 minutes, 1800 is 30 minutes.

$feed->set_timeout(50);

$success = $feed->init();

$feed->handle_content_type();

if ($success):

echo "<ul class='bs_twitter_feed'>";

foreach ($feed->get_items(0, $number) as $item):

if ($item) {

?>

<li>

<?php

$content = $this->bs_string_remover($item->get_title(), $twitter_username);

if($hyperlinks!=""){

$content=$this->bs_tweeter_hyperlinks($content);

}

if($replies!=""){

$content=$this->bs_tweeter_users($content);

}

if($avatar !=""){

echo '<div><a href="'.$item->get_permalink().'"><img src="'.$this->bs_cache_avatar($twitter_username).'" /></a></div>';

}

echo $content;

if($timestamps!=""){

echo '<span><abbr title="'.$item->get_date().'">'.$this->bs_relative_time(strtotime($item->get_date())).'</abbr></span>';

}

?>

</li>

<?php

} // end if there is an item

endforeach;

echo "</ul>";

if($twitter_username !=""){

echo "<a class='follow' href='http://twitter.com/".$twitter_username."'>More ...</a>";

}

endif; //success

}

echo $after_widget;

}

That’s it! You can take a look at the new code and if you have any questions feel free to comment bellow.

Bookmark and Share

There are a lot of Twitter widgets for WordPress but in my experience none of those utilize the powerful SimplePie PHP class that is in the WordPress core. SimplePie is a powerful RSS reader class that has very nice built-in caching system since as we all know the Twitter API is limited to only 150 requests per hour creating problems with high traffic websites.

You can download the plug-in here.

Step 1: Getting the plug-in ready

Create a folder and name it bs_twitter. In that folder, create a PHP file and name it the same as the folder i.e. bs_twitter. Also, in the bs_twitter folder create a folder and name it cache. This will be the main plug-in file. Now, include the SimplePie class and add the activation/deactivation hooks for the plug-in.

register_activation_hook(__FILE__, 'bs_twitter_activate');
register_deactivation_hook(__FILE__, 'bs_twitter_deactivate');
if ( file_exists(ABSPATH . WPINC . '/class-feed.php') ) {
	@require_once (ABSPATH . WPINC . '/class-feed.php');
}
function bs_twitter_activate () {
}
function bs_twitter_deactivate () {
}

Step 2: Have the widget code prepared

Starting from WordPress 2.8, creating a widget has become easier with the widget API. This code needs to be pasted to the widgets.php file:

• BS_Twitter is both the name of the class, as well as the name of the first function (the constructor). The constructor contains the code needed to setup the widget – it’s called Twitter Posts.

• form() generates the form that you see in the widget management page in WordPress.

• update() updates the options you enter in the form when the widget configuration is saved.

• widget() displays the actual output of the widget in the main site.

• The last part of the code hooks into WordPress’ widget initialization and instructs it to register your widget

class BS_Twitter extends WP_Widget {
	function BS_Twitter() {
		$widget_ops = array( 'classname' => 'twitter_widget', 'description' => 'Show your latest Tweets' );
				$this->WP_Widget( 'twitter_widget', 'Twitter Posts', $widget_ops);
	}
	function form($instance) {
	}
	function update($new_instance, $old_instance) {
	}
	function widget($args, $instance) {
	}
}
add_action( 'widgets_init', 'bs_load_widgets' );
function bs_load_widgets() {
	register_widget('BS_Twitter');
}

Step 3: Creating the form

First thing that needs to be done even before you create the form for a widget, you must determine the type of inputs you need. For this specific widget, 3 inputs are needed: title for the widget, Twitter username, and number of tweets to be displayed. If you look at the basic code above, in the form() function you will find a parameter $instance. This basically contains the current values for all inputs in the form (for example, when you save the form with certain values). Therefore, it is needed to pull out the current values of the widgdet and populate the widget input fields with them.

$instance = wp_parse_args( (array) $instance, array('title' => 'Twitter', 'number' => 5, 'twitter_username' => 'abuzz') );
$title = esc_attr($instance['title']);
$twitter_username = $instance['twitter_username'];
$number = absint($instance['number']);
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"> Title: </label>
<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('twitter_username'); ?>"> Twitter username: </label>
<input id="<?php echo $this->get_field_id('twitter_username'); ?>" name="<?php echo $this->get_field_name('twitter_username'); ?>" type="text" value="<?php echo $twitter_username; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('number'); ?>"> Number of twits: </label>
<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" />
</p>
<?php

Maybe this seems as heavy code, but it actually is very simple. It creates a HTML form containing several changes. Instead of using id’s and name’s, you have to use get_field_id(). This needs to be done because if there are multiple instances of a widget and only one single ID, there will be errors. WordPress takes care of it for you if you use the said function. The other thing is that the value of the input fields is generated using PHP.

Step 4: Making Sure Your Form is Saved

To make sure your form updates, you need to configure your update() function. This is very simple. By default, WordPress gives 2 parameters – the old instance, and the new instance. We basically don’t really need the old instance because the old instance is only used if there are values that you may not want to change. Paste in this code into the update() function:

$instance=$old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['twitter_username']=$new_instance['twitter_username'];
$instance['number']=$new_instance['number'];
return $instance;

Step 5: Output the Widget HTML

This is the final step, and it makes sure you widget displays HTML on the front end. Now that we have the user inputs set up, we can just use the inputs to communicate with the Twitter API and display tweets. The first step in the widget() function is to get the values of the user inputs. Copy and paste this code:

extract($args);
$title = apply_filters('widget_title', $instance['title']);
if ( empty($title) ) $title = false;
$twitter_username = $instance['twitter_username'];
$number = absint( $instance['number'] ); 
if ( empty($twitter_username) ) return;

Once this is done, paste this code:

if($title){
echo $before_title;
echo $title;
echo $after_title;
}
echo $before_widget;
if (class_exists('SimplePie')) {
$feed = new SimplePie();
$feed->set_feed_url('http://www.twitter.com/statuses/user_timeline/'.$twitter_username.'.rss');
$feed->set_cache_location(ABSPATH.'wp-content/plugins/bs_twitter/cache');
$feed->enable_cache(true); //disable caching
$feed->set_cache_duration(1800); //The number of seconds to cache for. 60 is 1 minute, 600 is 10 minutes, 900 is 15 minutes, 1800 is 30 minutes.
$feed->set_timeout(50);
$success = $feed->init();
$feed->handle_content_type();
if ($success):
echo "<ul>";
foreach ($feed->get_items(0, $number) as $item):
if ($item) {
?>
<li>
<a href="<?php echo $item->get_permalink(); ?>">
<?php echo $item->get_title() ?>
</a>
</li>
<?php
} // end if there is an item
endforeach;
echo "</ul>";
endif; //success
}
echo $after_widget;

This is a great plug-in for those who have high-traffic websites. This tutorial makes it easier to create customized Twitter widget. Options can be added and change to suite your needs.

This is just the first tutorial of the series that is coming up in the next period. We will explain how to customize this widget and adding more features such as adding the user avatar, discovering hyperlinks and hashtags and much more.

Bookmark and Share