How to create a WordPress custom widgets?

Posted by admin On 11-01-2012

Introduction of WordPress 2.8 for blog – o – sphere given user to more flexibility to publish data according to our need. WordPress 2.8′s new widget class allows the user to create custom widget. In this tutorial I will take you through various steps of setting up a widget in wordpress.

What can you learn from example custom widget?

Our example will tell you how to show a particular page in your widget area. Control will allow you to input all the necessary form data to give necessary out put.

custom widget wordpress

How will custom widget look in your dashboard?

Register the widget:

WordPress provides the widgets_init action hook that will allow us to register a widget

add_action('widgets_init', create_function('', 'return register_widget("custom_page");'));

Setting up of widget:

WordPress 2.8 allows you to create custom widget by simply extending WP_Widget class. Hence, first start creating a widget class by extending WP_Widget.

class custom_page extends WP_Widget {

}

Then start creating our first function for this wordpress widget. Note that the first function name makes our widget unique for your wordpress and it is same as the widget class

class custom_page extends WP_Widget { /** constructor */ function custom_page() { parent::WP_Widget(false, 'custom_page'); $widget_ops = array( 'description' => esc_html__('Display selected page with thumbnail', 'primeVision') ); /* Create the widget. */ $this->WP_Widget( 'custom_page', esc_html__('primeVision: Custom Page', 'primeVision'), $widget_ops );

}

Handling the widget:

The next step in our widget creation is to handle the widget data.

/** @see WP_Widget::widget */

function widget($args, $instance) {

extract( $args );

$allpage = $instance['allpage'];

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

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

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

?><?php query_posts(‘&pagename=’ .$allpage); ?>

<?php if (have_posts()) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php echo $before_widget; ?>

<?php echo $before_title ?> <span><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php if ( function_exists(‘the_title_attribute’)) the_title_attribute(); else the_title(); ?>”><?php the_title(); ?></a></span> <?php echo $after_title; ?>

<?php

$post_id = get_the_ID();

//Get the Thumbnail URL

$src = wp_get_attachment_image_src( get_post_thumbnail_id($post_id) );

<a href=”<?php the_permalink() ?>”><img src=”<?php bloginfo(‘template_url’)?>/scripts/timthumb.php?src=<?php echo $src[0]; ?>&h=<?php echo $post_thumb_height; ?>&w=<?php echo $post_thumb_width; ?>&zc=1″ alt=”"> </a>

<?php endwhile; ?>

<?php endif; wp_reset_query(); ?>

<?php echo $after_widget; ?>

<?php

}

Making sure that our widget is updated and saved:

function update($new_instance, $old_instance) {

$instance = $old_instance;

$instance['allpage'] = strip_tags($new_instance['allpage']);

$instance['num_words_limit'] = strip_tags( $new_instance['num_words_limit'] );

$instance['post_thumb_width'] = ( $new_instance['post_thumb_width'] ) ? absint(strip_tags( $new_instance['post_thumb_width'] )) : 60;

$instance['post_thumb_height'] = ( $new_instance['post_thumb_height'] ) ? absint(strip_tags( $new_instance['post_thumb_height'] )) : 60;

return $instance;

}

Creating our widget form controls or settings:

The get_field_id() and get_field_name() functions in wordpress 2.8 handles all the necessary work, making widget creation easier for user.

/** @see WP_Widget::form */

function form($instance) {

<p>

<label for=”<?php echo $this->get_field_id(‘allpage’); ?>”><?php _e(‘allpage:’); ?></label>

<select class=”widefat” id=”<?php echo $this->get_field_id(‘allpage’); ?>” name=”<?php echo $this->get_field_name(‘allpage’); ?>” >

<?php $pages = get_pages();

$allpage = array();

foreach ($pages as $page) {

$allpage = $page->post_title;

echo “<option value=\”$allpage\”>$allpage</option>\n”;

}

</select>

</p>

<p>

<label for=”<?php echo $this->get_field_id( ‘num_words_limit’ ); ?>”><?php esc_html_e(‘Limit the number of words to show from each post:’, ‘slider’); ?></label>

<input id=”<?php echo $this->get_field_id( ‘num_words_limit’ ); ?>” type=”text” name=”<?php echo $this->get_field_name( ‘num_words_limit’ ); ?>” value=”<?php echo $instance['num_words_limit']; ?>” size=”5″ maxlength=”4″ />

<br />

</p>

<p>

<label for=”<?php echo $this->get_field_id( ‘post_thumb_width’ ); ?>”><?php esc_html_e(‘Thumbnail Dimensions:’, ‘primeVision’); ?></label><br />

<input id=”<?php echo $this->get_field_id( ‘post_thumb_width’ ); ?>” type=”text” name=”<?php echo $this->get_field_name( ‘post_thumb_width’ ); ?>” value=”<?php echo $instance['post_thumb_width']; ?>” size=”5″ maxlength=”4″ />

<input id=”<?php echo $this->get_field_id( ‘post_thumb_height’ ); ?>” type=”text” name=”<?php echo $this->get_field_name( ‘post_thumb_height’ ); ?>” value=”<?php echo $instance['post_thumb_height']; ?>” size=”5″ maxlength=”4″ />

<br />

<?php esc_html_e(‘(Width X Height) in pixels’, ‘primeVision’); ?>

</p>

<?php

}

Finally we are done with custom widget. Here is all the code organized in one go.

/** custom_page Class

class custom_page extends WP_Widget {

/** constructor */

function custom_page() {

parent::WP_Widget(false, ‘custom_page’);

$widget_ops = array( ‘description’ => esc_html__(‘Display selected page with thumbnail’, ‘primeVision’) );

/* Create the widget. */

$this->WP_Widget( ‘custom_page’, esc_html__(‘primeVision: Custom Page’, ‘primeVision’), $widget_ops );

}

/** @see WP_Widget::widget */

function widget($args, $instance) {

extract( $args );

$allpage = $instance['allpage'];

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

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

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

?><?php query_posts(‘&pagename=’ .$allpage); ?>

<?php if (have_posts()) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php echo $before_widget; ?>

<?php

$post_id = get_the_ID();

//Get the Thumbnail URL

$src = wp_get_attachment_image_src( get_post_thumbnail_id($post_id) );

<?php endwhile; ?>

<?php endif; wp_reset_query(); ?>

<?php echo $after_widget; ?>

<?php

}

/** @see WP_Widget::update */

function update($new_instance, $old_instance) {

$instance = $old_instance;

$instance['allpage'] = strip_tags($new_instance['allpage']);

$instance['num_words_limit'] = strip_tags( $new_instance['num_words_limit'] );

$instance['post_thumb_width'] = ( $new_instance['post_thumb_width'] ) ? absint(strip_tags( $new_instance['post_thumb_width'] )) : 60;

$instance['post_thumb_height'] = ( $new_instance['post_thumb_height'] ) ? absint(strip_tags( $new_instance['post_thumb_height'] )) : 60;

return $instance;

}

/** @see WP_Widget::form */

function form($instance) {

<p>

<label for=”<?php echo $this->get_field_id(‘allpage’); ?>”><?php _e(‘allpage:’); ?></label>

<select class=”widefat” id=”<?php echo $this->get_field_id(‘allpage’); ?>” name=”<?php echo $this->get_field_name(‘allpage’); ?>” >

<?php $pages = get_pages();

$allpage = array();

foreach ($pages as $page) {

$allpage = $page->post_title;

echo “<option value=\”$allpage\”>$allpage</option>\n”;

}

</select>

</p>

<p>

<label for=”<?php echo $this->get_field_id( ‘num_words_limit’ ); ?>”><?php esc_html_e(‘Limit the number of words to show from each post:’, ‘slider’); ?></label>

<br />

</p>

<p>

<label for=”<?php echo $this->get_field_id( ‘post_thumb_width’ ); ?>”><?php esc_html_e(‘Thumbnail Dimensions:’, ‘primeVision’); ?></label><br />

<br />

<?php esc_html_e(‘(Width X Height) in pixels’, ‘primeVision’); ?>

</p>

<?php

}

} // class custom_page

// register custom_page widget

add_action(‘widgets_init’, create_function(”, ‘return register_widget(“custom_page”);’));

I hope by this time you can create your own widget or look at following source of custom widgets info.

U-Design is a very powerful theme which suits both, users with no programming background as well as advanced developers.

Scope is the perfect theme for the creative agency, freelancer or general business. Strong lines, strong colours and a bunch of super-awesome features to keep you busy.

Karma is a Premium WordPress Theme built on a highly intelligent framework. It’s the only theme on Themeforest to feature the amazing new CU3ER v1 3D slider.

Striking is an extremely powerful and flexible wordpress theme – actually a “Super Premium” theme as it has extraordinary features and coding that are not found in the normal premium WP theme.

Yin & Yang is a light, minimalistic, simple to use portfolio theme. Quick to setup and easy to customize, thanks to the powerful admin panel, and the detailed documentation, Yin & Yang is the perfect theme for showcasing your most important work directly in front of your potential clients.

Aware is an interactive, responsive portfolio theme perfect for freelancers, web designers, photographers and videographers alike.

Core is the Minimalist Photography, Portfolio, Personal website Template built with latest WordPress features. Custom Post Type and Image Uploader etc.

Photolux is a powerful and elegant Portfolio and Photography WordPress Theme which is best suited for photographers and creatives who use portfolios to showcase their work.

RT-Theme 15 is a premium wordpress theme with powerfull CMS tools. You can use it for business, corporate, product catalogue, services or portfolio web sites.

King Size is a premium wordpress theme suitable for business, corporate, product catalogue, services or portfolio web sites.

Eblogresources

How to create a WordPress custom widgets?

Post A Comment

Categories

Recent Posts