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.

© bojan for Blog Design Studio, 2013. | Permalink

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.

© bojan for Blog Design Studio, 2012. | Permalink

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.

© bojan for Blog Design Studio, 2012. | Permalink

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

© bojan for Blog Design Studio, 2012. | Permalink

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.

© bojan for Blog Design Studio, 2012. | Permalink

• 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.

© bojan for Blog Design Studio, 2012. | Permalink

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.

© bojan for Blog Design Studio, 2012. | Permalink

Its open source and thus the platform itself is free to use and develop on – starting on WordPress is like less than half the cost of custom developing from scratch or using any other robust CMS.

2. Additional Functionality with Plugins:

WordPress community is huge and developing everyday – they contribute in the form of plugins which gives you additional functionality at ease and most of them are free or really low cost. Try to only use plugins which are regularly updated as it means the developer is active and it was not just a onetime thing.

3. Simple to Develop:

In comparison to any other robust Content Management Systems present out there, WordPress has the simplest of the code and is very documented – makes it really easy and simple to start developing on wordpress for anybody.

4. Beautiful Design for Branding:

Because of the flexibility of its code, the framework has no limitations in terms of design as most other CMS’s has – you can do anything to it in terms of design – no limitations really.

5. Fast Launching:

All the above factors makes the site development really fast and save you a lot of valuable time.

6. Themes – multiple prebuilt websites/blogs:

There are a huge bunch of themes available for use – free or low cost. If you are starting with a new concept then you can start with one of them rather going custom to start with – and as you grow and know your business better then you can start customizing – all depends on your business model. Just make sure that the theme you are selecting is not only just good to look at but has the simple management of the functionality in the backend so you can manage it simply (themes are not simply designs but a complete site but most of them available in the marketplace focus only on the design as thats the only thing an average person understands – the frontend).

7. SEO friendly:

It is built to be sear engine friendly – pings every time you do any update on the site. Apart from that there are multiple free plugins available for you to extend the SEO functionality and manage it easily all by yourself.

8. Updated very easily:

WordPress has regular updates and you can simply implement that with click of a button. Even the plugins are the same. So your website is tuned to the latest developments.

9. Easy Content Management:

Writing content in the backend is as simple as writing in MS Word. Also, you can play around with the placement of the features and add new features yourself mostly all by yourself – just make sure that the developer utilizes the power of wordpress when working on your site (making the sections widgetized to the extent possible).

10. WordPress as a Company itself is run by smart innovative people and though it is open source it has a huge funding behind it for them to push developments on the platform itself – if you are a business owner you will understand the importance of this – its not only the product but who is behind it and how much money they have as its not a one day use thing

© rajat for Blog Design Studio, 2011. | Permalink

I went to Pingdom and according to it the site is loading but surprisingly it takes 17+ sec – pingdom tests are from US servers – Its night time in US and so I cant confirm this with anybody. Here is the test link.

So I tried to ping and traceroute the site to see the response and make sure that its not only me or the few people I know – here’s the result – the website is actually not loading – it gives me the assumption that the website is down which is highly unlikely as I cant believe that Paypal can be down for an hour – but does this mean Internet Service Provider’s Server issues – and that also simultaneously with so many of them in multiple countries (Macedonia, India, Singapore)!

Maybe some of you can throw some more light to understand this problem! What other test tools are there for a non techie person like me? How do we really find out an issue if our website is down?

Update: After 1+ hour, its still down – same results for everyone I know!

2nd Update: Rankflex says the URL is not valid… hehehe I dont know if we can rely on these online tools or is it something really wrong with ISP’s – Paypal website still not opening by the way – I am giving up checking now and getting back to other work!

© rajat for Blog Design Studio, 2011. | Permalink

Also, a very creative infographic on WordPress Facts, Figures & History:

© rajat for Blog Design Studio, 2011. | Permalink