Expert Group of programming

How to create custom widget in wordpress

Posted by : Heycode Tech | Posted in : Admin Feature, widget, wordpress | Sep 27,2015 | 0 comments

Widget is a very special feature in wordpress.Now in current information, it plays a very magical role in wordpress. Many types of the plugins, who are using it in many where like MegaMenu, Optimizepress theme use in editor, Visual Editor plugin etc .

As per growing to use of widget,we need to create the custom widget, Here this article describes about the widget creation.

Here is the functions which is used for creating an widget.

1: Register widget :register_widget( 'heycodetech_widget' );.
2: Create unique widget ID.
3: Functions use in:-
3.1 public function widget( $args, $instance )
3.2 public function form( $instance )
3.3 public function update( $new_instance, $old_instance )

3.1 public function widget( $args, $instance ) : This functions is used for displaying the output in Frontend . It has the two variables .

i: $args = > It has the internal values of your parameter which is used for register the sidebar . Like
‘before_widget’, ‘after_widget’ , ‘before_title’ ,’after_title’ etc
ii: $instance = > it has the custom parameter values which is declared in form function.

3.2 public function form( $instance ): Form function is used for creating the widget field . Now in this function, you will declared,how many field in widget and what is the saved values .

it has only one parameter $instance. This parameter have the saved values in database.Like your widget have three custom field then it’s values saved in database and will recover from this variable.

3.3 public function update( $new_instance, $old_instance ) : This function is used for save the widget field values in database .

It has the two parameter

i : $new_instance = > current values of field.
ii : $old_instance= > One step before what was value of this field.

Let’s take an example for creating an custom widget.

Now in our example, we will display one text-field and one text-area.

// Creating the widget 
class heycodetech_widget extends WP_Widget {

function __construct() {
// ID of your widget

// Widget name will appear in UI
__('Heycodetech widget Name', 'heycodetech'), 

// Widget description
array( 'description' => __( 'Custom widget description', 'heycodetech' ), ) 

// Creating widget front-end 
// This is where the action happens
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];

$custom_value = $instance['custom_key'];

<section class="heycodetech-list clearfix">
     <?php echo $args['before_title'] . $title . $args['after_title'];  ?>
       echo $custom_value;
echo $args['after_widget'];
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
else {
$title = __( 'Heycodetech Title ', 'heycodetech' );

$custom_value = $instance[ 'custom_key' ];
// Widget admin form
<label for="<?php echo $this -> get_field_id('title'); ?>"><?php _e('Title:'); ?></label> 
<input class="widefat" id="<?php echo $this -> get_field_id('title'); ?>" name="<?php echo $this -> get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />

<label for="<?php echo $this -> get_field_id('custom_key'); ?>"><?php _e('Custom Field:'); ?></label> 
<textarea cols="35" rows="10" class="widefat" id="<?php echo $this -> get_field_id('custom_key'); ?>" name="<?php echo $this -> get_field_name('custom_key'); ?>" ><?php echo $custom_value; ?></textarea>


	// Updating widget replacing old instances with new
	public function update( $new_instance, $old_instance ) {
	$instance = array();
	$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['custom_key'] = ( ! empty( $new_instance['custom_key'] ) ) ? $new_instance['custom_key']  : '';
	return $instance;
	} // Class ends here

	// Register and initialize/run/load the widget
	function heycodetech_register_widget() {
	register_widget( 'heycodetech_widget' );
	add_action( 'widgets_init', 'heycodetech_register_widget' );

Now use this code in functions.php file and see in wordpress dashboard in path :
Apperence – > widgets

Then a widget with name : Heycodetech widget name :have seen .

Let me know if need any help.


Author information - Heycode Tech

Every world can ask question and my website registered user give the suggestion.

See all posts by Author

Connect to author

Leave a Reply

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

About us

Heycodetech is a platform where you can ask any questions related to the programming like PHP,jQuery, MYSQL,HTML , CSS and more Here is the Expert group of programming.