How To Create Custom Widgets

December 28th, 2009 By WP Tricks Posted in Tricks

WordPress is the most Usable Publishing System I ever use and found, there are so many blogger and internet writer uses WordPress on they blog. WordPress has many free themes and plugins, the other reason is, they add nice featured such as widgets, with WordPress Widgets, we can add anything without touching the themes files, just drag and setting and done ;)

On this WP Tricks, I will show you, how to create Custom Widgets. This tricks written by Darren Hoyt and Ben Gillbanks, and original published on Darren Hyot Blog

Sponsored Links

Let’s Get Started, first open your functions.php theme and paste or re writes this code

class My_Widget extends WP_Widget {
	function My_Widget() {
		parent::WP_Widget(false, 'Our Test Widget');
	}
function form($instance) {
		// outputs the options form on admin
	}
function update($new_instance, $old_instance) {
		// processes widget options to be saved
		return $new_instance;
	}
function widget($args, $instance) {
		// outputs the content of the widget
	}
}
register_widget('My_Widget');

This code above, only add Example Custom Widget, without some setting and options activated, on the next tricks from Darren Hyot blog, They give example by writing Popular Post widget, let’s do it, below your code above add this code

<?php
class bm_widget_popularPosts extends WP_Widget {

	function bm_widget_popularPosts() {
		parent::WP_Widget(false, 'Popular Posts');
	}

	function widget($args, $instance) {
		$args['title'] = $instance['title'];
		bm_popularPosts($args);
	}

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

	function form($instance) {
		$title = esc_attr($instance['title']);
?>
		<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label></p>
<?php
	}
 }
function bm_popularPosts($args = array(), $displayComments = TRUE, $interval = '') {

	global $wpdb;

	$postCount = 5;

	$request = 'SELECT *
		FROM ' . $wpdb->posts . '
		WHERE ';

	if ($interval != '') {
		$request .= 'post_date>DATE_SUB(NOW(), ' . $interval . ') ';
	}

	$request .= 'post_status="publish"
			AND comment_count > 0
		ORDER BY comment_count DESC LIMIT 0, ' . $postCount;

	$posts = $wpdb->get_results($request);

	if (count($posts) >= 1) {

		if (!isset($args['title']) {
			$args['title'] = 'Popular Posts';
		}

		foreach ($posts as $post) {
			wp_cache_add($post->ID, $post, 'posts');
			$popularPosts[] = array(
				'title' => stripslashes($post->post_title),
				'url' => get_permalink($post->ID),
				'comment_count' => $post->comment_count,
			);
		}

		echo $args['before_widget'] . $args['before_title'] . $args['title'] . $args['after_title'];
?>

		<ol>
<?php
		foreach ($popularPosts as $post) {
?>
			<li>
				<a href="<?php echo $post['url'];?>"><?php echo $post['title']; ?></a>
<?php
			if ($displayComments) {
?>
			(<?php echo $post['comment_count'] . ' ' . __('comments', BM_THEMENAME); ?>)
<?php
			}
?>
			</li>
<?php
		}
?>
		</ol>

<?php
		echo $args['after_widget'];
	}
}
?>

And done, you have Popular Post widget and with this similar tricks you can made more sophocated custom widget, such as add Google AdSense widget, Flickr widget, Recent Twitter widgets and Many more

Related Posts

  1. How to Get Most Commented Posts with Thumbnail
  2. Create Custom Page with Custom Loop and Query
  3. Automatically Create a Custom Field
  4. The Best Way to Insert Custom Content into Feeds
  5. Tutorial To Display a Different Number of Post on Search Result
  6. Create you own Excerpt in WordPress

How To Create Custom Widgets On The NET

Creating Custom Widgets

Simple Custom Widgets. There are two stages to creating a custom widget. Firstly we must create a class that defines the widget, and secondly we must incorporate the widget into Qt ... read more

Source: http://doc.trolltech.com/3.3/designer-manual-7.html

Axure - Custom Widget Libraries

Custom Widget Libraries Overview. You can create your own library of custom widgets and load them into the Widgets pane (available in Version 5.5+). read more

Source: http://axure.com/custom-widget-libraries.aspx

Create a Custom Widget For Free NetHackz

There was a point when widgets were everywhere on the web. However, it seems like the widget craze has slowly diminished over the past few months. Although most read more

Source: http://nethackz.com/create-a-custom-widget-for-free/

How to Create Custom Widgets

Creating custom widgets can allow you to spruce up your website or web design without totally overhauling it. Scroll bars and button and text boxes, all things that some people ... read more

Source: http://ezinearticles.com/?How-to-Create-Custom-Widgets&id=1258042

Qt 4.1: Creating Custom Widgets for Qt Designer

Since Qt Designer uses real widgets during the form design process, custom widgets will appear the same as they do when previewed. The ability to create custom widgets in Qt Designer ... read more

Source: http://doc.trolltech.com/4.1/designer-creating-custom-widgets.html


Amazing Touch


1 Comments

  1. Custom Widget is the best solutions for theme developer to enhanced they theme. And This tricks is really useful.. thanks for share Widgets tricks.


0 Trackbacks

  1. designfloat.com 29 12 09

Add Your Comment

Gravatar