Popular post(bài viết được xem nhiều nhất), Lastest post(Bài viết mới nhất), Comments và Tag là nhưng widget cần thiết đối với một blog. Hôm nay, Hải sẽ hướng dẫn các bạn tự tạo một widget tích hợp tất cả những widget trên mà không cần dùng đến Plug-in.

Bước 1: PhpThumb

Trước tiên, bạn cần tích hợp phpthumb cho blog của mình, bạn đọc bài viết Tạo thumbnail cho blog wordpress và thesis theme bằng phpthumb của HienTinh’s blog hoặc Tự lấy ảnh trong bài viết. của HuTruc để biết cách làm.
Tiếp đến, bạn thêm đoạn code sau vào file function.php đối với Theme thường và Genesis Theme. Còn nếu đang sử dụng Thesis Theme bạn chỉ việc làm tương tự với file custom_functions.php.

/*---------------------------------------------------------------------------------*/
/* Haiblog.info Tabs widget */
/*---------------------------------------------------------------------------------*/
if (!is_admin()) {
	wp_enqueue_script('jquery');
	wp_enqueue_script( 'haiblogTabs', ("http://127.0.0.1/haiblog/wp-content/themes/thesis_17/custom/js/haiblog_tabs.js"), array( 'jquery' ) );
}

class Haiblog_Tabs extends WP_Widget {

   function Haiblog_Tabs() {
  	   $widget_ops = array('description' => 'Haiblog_Tab v?i Bài vi?t ???c xem nhi?u nh?t, bài vi?t m?i nh?t, comments m?i nh?t và Tag.' );
       parent::WP_Widget(false, $name = __('Haiblog.info - Tabs', 'haiblog'), $widget_ops);
   }

   function widget($args, $instance) {
       extract( $args );

       $number = $instance['number']; if ($number == '') $number = 5;
       $thumb_size = $instance['thumb_size']; if ($thumb_size == '') $thumb_size = 35;
       ?>  

 		<div id="tabs" class="widget">

 			<div class="outer">
 			<div class="inner">

            <ul class="haiblogTabs">
                <li class="popular"><a href="#tab-pop"><?php _e('Popular', 'haiblog'); ?></a></li>
                <li class="latest"><a href="#tab-latest"><?php _e('Latest', 'haiblog'); ?></a></li>
                <li class="comments"><a href="#tab-comm"><?php _e('Comments', 'haiblog'); ?></a></li>
                <li class="tags"><a href="#tab-tags"><?php _e('Tags', 'haiblog'); ?></a></li>
            </ul>

            <div class="clear"></div>

            <div class="boxes box inside">

                <ul id="tab-pop" class="list">
                    <?php if ( function_exists('haiblog_tabs_popular') ) haiblog_tabs_popular($number, $thumb_size); ?>
                </ul>

                <ul id="tab-latest" class="list">
                    <?php if ( function_exists('haiblog_tabs_latest') ) haiblog_tabs_latest($number, $thumb_size); ?>
                </ul>	

                <ul id="tab-comm" class="list">
                    <?php if ( function_exists('haiblog_tabs_comments') ) haiblog_tabs_comments($number, $thumb_size); ?>
                </ul>	

                <div id="tab-tags" class="list">
                    <?php wp_tag_cloud('smallest=12&largest=20'); ?>
                </div>

            </div><!-- /.boxes -->

			</div><!-- /inner -->
			</div><!-- /outer -->

        </div><!-- /haiblogTabs -->

         <?php
   }

   function update($new_instance, $old_instance) {
       return $new_instance;
   }

   function form($instance) {
       $number = esc_attr($instance['number']);
       $thumb_size = esc_attr($instance['thumb_size']);

       ?>
       <p>
       <label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('Số bài viết muốn hiển thị:','haiblog'); ?>
       <input class="widefat" id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" />
       </label>
       </p>
       <p>
       <label for="<?php echo $this->get_field_id('thumb_size'); ?>"><?php _e('Kích cỡ ảnh hiển thị (0=Tắt):','haiblog'); ?>
       <input class="widefat" id="<?php echo $this->get_field_id('thumb_size'); ?>" name="<?php echo $this->get_field_name('thumb_size'); ?>" type="text" value="<?php echo $thumb_size; ?>" />
       </label>
       </p>
       <?php
   }

}
register_widget('Haiblog_Tabs');

/*---------------------------------------------------*/
/* Tabs - Xem nhiều - http://haiblog.info */
/*---------------------------------------------------*/

function haiblog_tabs_popular( $posts = 5, $size = 35 ) {
	$popular = new WP_Query('orderby=comment_count&posts_per_page='.$posts);
	while ($popular->have_posts()) : $popular->the_post();
?>
<li>
	<?php img($size,$size); ?>
	<a title="<?php the_title(); ?>" href="<?php the_permalink() ?>"><?php the_title(); ?></a>
	<span class="meta"><?php the_time($GLOBALS['date']); ?></span>
	<div class="fix"></div>
</li>
<?php endwhile;
}

/*---------------------------------------------------*/
/* Tabs - Bài mới nhất - http://haiblog.info */
/*---------------------------------------------------*/

function haiblog_tabs_latest( $posts = 5, $size = 35 ) {
	$the_query = new WP_Query('showposts='. $posts .'&orderby=post_date&order=desc');
	while ($the_query->have_posts()) : $the_query->the_post();
?>
<li>
	<?php img($size,$size); ?>
	<a title="<?php the_title(); ?>" href="<?php the_permalink() ?>"><?php the_title(); ?></a>

	<span class="meta"><?php the_time($GLOBALS['date']); ?></span>
	<div class="fix"></div>
</li>
<?php endwhile;
}

/*-------------------------------------------------*/
/* Tabs - Comments mới nhất - http://haiblog.info */
/*-------------------------------------------------*/

function haiblog_tabs_comments( $posts = 5, $size = 35 ) {
	global $wpdb;
	$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
	comment_post_ID, comment_author, comment_author_email, comment_date_gmt, comment_approved,
	comment_type,comment_author_url,
	SUBSTRING(comment_content,1,50) AS com_excerpt
	FROM $wpdb->comments
	LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
	$wpdb->posts.ID)
	WHERE comment_approved = '1' AND comment_type = '' AND
	post_password = ''
	ORDER BY comment_date_gmt DESC LIMIT ".$posts;

	$comments = $wpdb->get_results($sql);

	foreach ($comments as $comment) {
	?>
	<li>
		<?php echo get_avatar( $comment, $size ); ?>

		<?php echo strip_tags($comment->comment_author); ?> said in: <a title="<?php echo get_the_title($comment->ID); ?>" href="<?php echo get_permalink($comment->ID); ?>#comment-<?php echo $comment->comment_ID; ?>"><?php echo get_the_title($comment->ID); ?>: </a><?php echo strip_tags($comment->com_excerpt); ?>...
		</a>
		<div class="fix"></div>
	</li>
	<?php
	}
}

Lưu ý:

Bạn cần download file haiblog_tabs.js về và upload lên Host của bạn, sau đó thay đổi đường dẫn trong đoạn code trên.

Bước 2: CSS

Cuối cùng, bạn chỉ cần thêm vào css để Tabs ngay ngắn và thêm sinh động . Cũng như HuTruc, Hải khuyên bạn nên tự thêm vào css trước khi tham khảo đoạn css sau của Hải:

/***** Haiblog.info Tab Widget ********************/
#tabs {
	height: auto;
	display: block;
	margin-bottom:30px;
	}

#tabs ul.haiblogTabs {
	padding: 0;
	margin: 0;
	}

#tabs ul.haiblogTabs li {
	background: #303030;
	float: left;
	display: inline;
	color: #FFF;
	margin: 0;
	cursor: pointer;
	padding: 0;
	border: none;
	}

#tabs ul.haiblogTabs li a.selected, #tabs ul.haiblogTabs li a:hover {
	background: #FFF;
	text-decoration: none;
	color: #000;
	}

#tabs ul.haiblogTabs li a {
	color: #FFF;
	display: block;
	float: left;
	padding: 12px 10px;
	font-size:11px;
	text-transform: uppercase;
	line-height: 20px;
	font-weight: bold;
	}

#tabs .inside {
	background: #FFF;
	padding: 0;
	*float:left;
	*padding-top: 0;
	}

#tabs .inside li {
	background: #FFF;
	list-style: none;
	font-size: 14px;
	}

#tabs #tab-tags {
	padding: 10px;
	}

#tabs .inside ul {
	margin: 0;
	border: none;
	padding: 0;
	}

#tabs .inside li {
	border: none;
	padding:15px;
	}

#tabs .inside li span.meta {
	display: block;
	font: 11px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color: #777;
	}

#tabs .inside li img.avatar, #tabs .inside li img {
	border: 1px solid #ddd;
	padding: 2px;
	background-color: #FFF;
	float: left;
	margin: 0 8px 0 0;
	}

#tab-tags {
	background: #FFF;
	border: 1px solid #E6E6E6;
	}

.inner {
	background: #303030;
	}

Lưu ý:

Đoạn css trên Hải làm dựa trên blog của Hải, vì vậy có thể sẽ không hợp với blog của bạn.

Sau khi hoàn thành!