Category:Bulid Web Designs & Code

How to Create Widget in WordPress with Easy Steps

create-widget-in-wordpressIn  this wordpress tutorial we are going to create widget in WordPress. In this basic widget tutorial we are going to create a simple widget in wordpress which will display the title of the widget and a welcome message “Welcome to WordPress Widgets”. So lets Start.

Step-1- Extend WP_Widget class to Create Widget in WordPress

This is the first step to create a basic widget in WordPress. This code for extending class can be written in a plugin or function.php file of your active WordPress theme. The purpose is that we are making a new instance of the class by extending it. so code is here.

[php]

class my_custom_widget extends WP_Widget {
/**
* There are four method inside this class needed to create
* a single instance of the WP_Widget class.
**/
}

[/php]

Method-1- Construct function of WordPress Widget Class

This function is one of the four  methods inside of the extended class. This function will assign name to class of widget, name to widget and a short description which will be shown in admin widget area.

[php]

public function __construct() {
$widget_options = array (
‘classname’ => ‘custom_widget’,
‘description’ => ‘This is an Example custom Widget’,
);
parent::__construct( ‘custom_widget_id’, ‘My Custom Widget’, $widget_options );
}

[/php]

Method-2- Widget Method to Create Display Output

This second method is for displaying output of the custom wordpress widget.

[php]

public function widget( $args, $instance ) {

$title = apply_filters( ‘widget_title’, $instance[‘title’] );
echo $args[‘before_widget’];

if ( !empty( $title ) )
echo $args[‘before_title’] . $title . $args[‘after_title’];

// This is area where you can run custom code to display the output
echo __( ‘Welcome to WordPress Widgets’, ‘theme_domain_name’ );

echo $args[‘after_widget’];
}

[/php]

Note: that every widget should include the 'before_widget''after_widget''before_title', and 'after_title' as shown above code.

Method-3- Form Method to Create WordPress Admin Widget Form

This is the third function method inside of the extended class. Where we create a form input in WordPress Admin widget screen. It is displayed in admin widget screen and accepts the input from users. Here is the widget code of this section.

[php]

public function form( $instance ) {
$title = !empty( $instance[‘title’] ) ? $instance[‘title’] : ”;
// Widget admin form
?>
<p>
<label for=”<?php echo $this->get_field_id( ‘title’ ); ?>”><?php _e( ‘Title:’ ); ?></label>
<input type=”text” id=”<?php echo $this->get_field_id( ‘title’ ); ?>” name=”<?php echo $this->get_field_name( ‘title’ ); ?>” value=”<?php echo esc_attr( $title ); ?>” />
</p>
<?php
}

[/php]

Method-4- Update Method to Save New Values in WordPress Database

This fourth and final method in extended class is to save new values in database given by user in Wordpess Widget Admin area. The code for this method is given below:

[php]

// Updating widget with new values
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance[‘title’] = ( !empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;
return $instance;
}

[/php]

Step-2-Register the Newly Created Widget in WordPress

We have create our extended class above and now we have to register our new class with wordpress press:

[php]

function register_my_custom_widget() {
register_widget( ‘my_custom_widget’ );
}
add_action( ‘widgets_init’, ‘register_my_custom_widget’);

[/php]

Final Words

In this WordPress Tutorial We have learnt that how can we create our own custom widget in WordPress. By adding all above parts of code, the complete code is given below:

[php]

class my_custom_widget extends WP_Widget {

public function __construct() {
$widget_options = array (
‘classname’ => ‘custom_widget’,
‘description’ => ‘This is an Example custom Widget’
);
parent::__construct( ‘custom_widget_id’, ‘My Custom Widget’, $widget_options );

}

public function widget( $args, $instance ) {

$title = apply_filters( ‘widget_title’, $instance[‘title’] );
echo $args[‘before_widget’];

if ( !empty( $title ) )
echo $args[‘before_title’] . $title . $args[‘after_title’];

// This is area where you can run custom code to display the output
echo __( ‘Welcome to WordPress Widgets’, ‘theme_domain_name’ );

echo $args[‘after_widget’];
}
public function form( $instance ) {
$title = !empty( $instance[‘title’] ) ? $instance[‘title’] : ”;
// Widget admin form
?>
<p>
<label for=”<?php echo $this->get_field_id( ‘title’ ); ?>”><?php _e( ‘Title:’ ); ?></label>
<input type=”text” id=”<?php echo $this->get_field_id( ‘title’ ); ?>” name=”<?php echo $this->get_field_name( ‘title’ ); ?>” value=”<?php echo esc_attr( $title ); ?>” />
</p>
<?php
}

// Updating widget with new values
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance[‘title’] = ( !empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;
return $instance;
}

}

function register_my_custom_widget() {
register_widget( ‘my_custom_widget’ );
}
add_action( ‘widgets_init’, ‘register_my_custom_widget’);

[/php]

Now this widget will be available in your WordPress Admin widget area and ready to use it in your sidebars.

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *

one × 4 =

Sign up Newsletter