How to Develop Custom Widgets for your Wordpress Website?
Published on 16 April 15
Semaphore1
Widgets are awesome little things that make your Wordpress website look great! There are widgets that might not be available with your theme or on Wordpress as such. What would you do in that case? Simple, create your own custom widget! It is similar to creating a plug-in; in fact it’s simpler than that
The widget has three major functions- widget, update and form. Here are the codes that relates to each one of them
function widget()
function update()
function form()
The Standard Structure of Widget
Before you begin creating a custom widget, it is necessary to understand the standard structure of a widget and what each function means
The widget has three major functions- widget, update and form. Here are the codes that relates to each one of them
function widget()
function update()
function form()
The Standard Structure of Widget
Before you begin creating a custom widget, it is necessary to understand the standard structure of a widget and what each function means
add_action( 'widgets_init', 'register_my_widget' ); // function to load my widget
function register_my_widget() {} // function to register my widget
class My_Widget extends WP_Widget () {} // The example widget class
function My_Widget() {} // Widget Settings
function widget() {} // displays the widget
function update() {} // updates the widget
function form() {} // The form for the different widget options
function register_my_widget() {} // function to register my widget
class My_Widget extends WP_Widget () {} // The example widget class
function My_Widget() {} // Widget Settings
function widget() {} // displays the widget
function update() {} // updates the widget
function form() {} // The form for the different widget options
Now that you know the outline of a widget, let’s try and understand the different steps that will lead to creating a custom widget
Creating a Custom Widget
Loading the Widget
Using widget_init() function, you can load the widget to the php file
Creating a Custom Widget
Loading the Widget
Using widget_init() function, you can load the widget to the php file
add_action( 'widgets_init', 'register_my_widget' );
Once you have loaded the widget to the theme, you will need to register the same in the theme
function register_my_widget()
{
register_widget( 'My_Widget' );
}.
Once you have loaded the widget to the theme, you will need to register the same in the theme
function register_my_widget()
{
register_widget( 'My_Widget' );
}.
Enclose into a Class
Now that the widget is registered, it is time to load it into a class. You should have the same name for the class and function
class My_Widget extends WP_Widget {}
Setting parameters are important to widgets, like size, width etc. You can pass the setting parameters using this class
Now that the widget is registered, it is time to load it into a class. You should have the same name for the class and function
class My_Widget extends WP_Widget {}
Setting parameters are important to widgets, like size, width etc. You can pass the setting parameters using this class
function My_Widget()
{
function My_Widget()
{
$widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the authors name ', 'example') );
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
$this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
}
{
function My_Widget()
{
$widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the authors name ', 'example') );
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );
$this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
}
Here you can give a small description to your widget, in case you are planning to load it into the theme. Now, your widget is basically configured. Now the three main functions will be taken care of in the steps that follow
Function Widget(): The First Function
This concerns itself with the display of your Widget on your Wordpress website. Some theme related arguments will be passed through this widget like the theme title etc. Once this is done, instance variables related to the function class are passed through this function
function widget( $args, $instance )
To make the values of this instance available locally, it is necessary to extract all the values locally within the system.
extract( $args );
After extracting the values, it is time to set the title, and related values for the widget using the code given below
Function Widget(): The First Function
This concerns itself with the display of your Widget on your Wordpress website. Some theme related arguments will be passed through this widget like the theme title etc. Once this is done, instance variables related to the function class are passed through this function
function widget( $args, $instance )
To make the values of this instance available locally, it is necessary to extract all the values locally within the system.
extract( $args );
After extracting the values, it is time to set the title, and related values for the widget using the code given below
$title = apply_filters('widget_title', $instance['title'] );
$name = $instance['name'];
$show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;
echo $before_widget;
// Display the widget title
if ( $title )
echo $before_title . $title . $after_title;
//Display the name
if ( $name )
printf( '<p>' . __('Hey their Sailor! My name is %1$s.', 'example') . '</p>', $name );
if ( $show_info )
printf( $name );
echo $after_widget;
Function Update()
$name = $instance['name'];
$show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;
echo $before_widget;
// Display the widget title
if ( $title )
echo $before_title . $title . $after_title;
//Display the name
if ( $name )
printf( '<p>' . __('Hey their Sailor! My name is %1$s.', 'example') . '</p>', $name );
if ( $show_info )
printf( $name );
echo $after_widget;
Function Update()
The settings made by the user will be loaded into this function, and will be customized as per user requirements.
function update( $new_instance, $old_instance )
{
$instance = $old_instance;
//Strips the tags from the title and name so that XHTML values are removed
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['name'] = strip_tags( $new_instance['name'] );
$instance['show_info'] = $new_instance['show_info'];
return $instance;
}
{
$instance = $old_instance;
//Strips the tags from the title and name so that XHTML values are removed
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['name'] = strip_tags( $new_instance['name'] );
$instance['show_info'] = $new_instance['show_info'];
return $instance;
}
Note: The values are stripped using this code so as to remove the XHTML values which can affect the proper functioning of the widget.
Function Form()
Form is basically the input box offered by the widget and is a very essential function. The user will define the values in the form. Like any other form, this one too will include check boxes, text input boxes etc.
What if the user does not select anything from the input fields? Here is a code that will deliver the output in such a case
Function Form()
Form is basically the input box offered by the widget and is a very essential function. The user will define the values in the form. Like any other form, this one too will include check boxes, text input boxes etc.
What if the user does not select anything from the input fields? Here is a code that will deliver the output in such a case
//Set up some default widget settings
$defaults = array( 'title' => __('Example', 'example'), 'name' => __('Bilal Shaheen', 'example'), 'show_info' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
Let’s see how the input text box form is created using Function form()
// Widget Title: Text Input
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
</p>
//Text Input
<p>
<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('Your Name:', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
</p>
// Checkbox
<p>
<input class="checkbox" type="checkbox" <?php checked( $instance['show_info'], true ); ?> id="<?php echo $this->get_field_id( 'show_info' ); ?>" name="<?php echo $this->get_field_name( 'show_info' ); ?>" />
<label for="<?php echo $this->get_field_id( 'show_info' ); ?>"><?php _e('Display info publicly?', 'example'); ?></label>
</p>
$defaults = array( 'title' => __('Example', 'example'), 'name' => __('Bilal Shaheen', 'example'), 'show_info' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>
Let’s see how the input text box form is created using Function form()
// Widget Title: Text Input
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
</p>
//Text Input
<p>
<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('Your Name:', 'example'); ?></label>
<input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
</p>
// Checkbox
<p>
<input class="checkbox" type="checkbox" <?php checked( $instance['show_info'], true ); ?> id="<?php echo $this->get_field_id( 'show_info' ); ?>" name="<?php echo $this->get_field_name( 'show_info' ); ?>" />
<label for="<?php echo $this->get_field_id( 'show_info' ); ?>"><?php _e('Display info publicly?', 'example'); ?></label>
</p>
Now that you have added the three functions which form the base of a custom widget for Wordpress, you are ready with a small widget specific to your needs. Save the code in your PHP file so that you can use it whenever you switch themes
This blog is listed under
Open Source
and Development & Implementations
Community
Related Posts:
Thank You for sharing. It is indeed helpful.