MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

How to Develop Custom Widgets for your Wordpress Website?

Published on 16 April 15
1048
1
3
How to Develop Custom Widgets for your Wordpress Website? - Image 1
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


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
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
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' );
}.
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
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 );
}
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
$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()
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;
}
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
//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>
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



















































































































How to Develop Custom Widgets for your Wordpress Website? - Image 1

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

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

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

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' );
}.

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

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 );
}

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

$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( '' . __('Hey their Sailor! My name is %1$s.', 'example') . '

', $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;
}

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

//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

//Text Input

// Checkbox

id="
This blog is listed under Open Source and Development & Implementations Community

Related Posts:
View Comment (1)
Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
  1. 17 April 15
    0

    Thank You for sharing. It is indeed helpful.

You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top