What is a Widget in WordPress? How do They Work and How to Create One?

You will often hear or wonder what is a widget in WordPress. This is expected curiosity from everyone who is into WordPress websites in one way or another. Let us inform you on how widgets work and how you can create a custom widget. Of course, you will be enlightened first on what a widget even is. 

Key Takeaways

• Development of WordPress Widget is a useful skill
• Usage of the Custom Widget is beneficial for your website
• Custom Widget has advantages

WordPress Widget Development in Simple Steps

One must know the basics of creating widgets in WordPress before attempting to create one. We have decided to provide you with a tutorial on creating complex and simple widgets. This one is simple for your ease, and it will be a “Greetings from Hostonce.com!” widget. 

We will be using the functions.php file to write this code. Here you go with as simple as coding can be in terms of widget development:

1. Extending the Class of WP_Widget

Open any text editor and create a new class to extend the basic WP_Widget class.

class HO_widget extends WP_Widget {

//Insert functions here

}

2. Add _ _ construct()

There are four standard functions. We should implement them one by one. Constructor is the first one. It determines the widget’s name, ID, and description.

function __construct() {

parent::__construct(

// widget ID

‘HO_widget’,

// widget name

__(‘Hostonce Sample Widget’, ‘HO_widget_domain’),

// widget description

array ( ‘description’ => __( ‘Hostonce Widget Tutorial’, ‘HO_widget_domain’ ), )

);

}

3. Adding Widget()

Now pay attention to the widget() function. It sets the look of your front-end WordPress custom widget.

public function form( $instance ) {

if ( isset( $instance[ ‘title’ ] ) )

$title = $instance[ ‘title’ ];

else

$title = __( ‘Default Title’, ‘HO_widget_domain’ );

?>

<p>

<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 ); ?>” />

</p>

<?php

}

Now we have configured our widget output. That enables it to display the phrase “Greetings from Hostonce.com!” and the title of the widget as the user specifies.

4. Add form()

It is time to use the form() method to program the back-end of the widget. You can see the result when you use the WordPress Dashboard to add the widget. 

public function form( $instance ) {

if ( isset( $instance[ ‘title’ ] ) )

$title = $instance[ ‘title’ ];

else

$title = __( ‘Default Title’, ‘HO_widget_domain’ );

?>

<p>

<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 ); ?>” />

</p>

<?php

}

This is how you set a custom widget up. Any title a user applies will be inserted in the HTML form of our creation. We have set the title name to Default Title in this custom WordPress widget example.

5. Add Update()

Now we must implement update() to refresh the widget whenever you change settings.

public function update( $new_instance, $old_instance ) {

$instance = array();

$instance[‘title’] = ( ! empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;

return $instance;

}

6. Registering Custom Widget

We have to use the add_action() function to register the custom widget. Place the given code at the top before you extend the WP_Widget class:

function HO_register_widget() {

register_widget( ‘HO_widget’ );

}

add_action( ‘widgets_init’, ‘HO_register_widget’ );

Adding the Code to the functions.php File

We have defined a new function named HO_register_widget. It uses the widget ID to register our widget (specified in the _ _ construct() function). We have used widgets_init to tie this function. This is how your final WordPress widget code should be:

function HO_register_widget() {

register_widget( ‘HO_widget’ );

}

add_action( ‘widgets_init’, ‘HO_register_widget’ );

class HO_widget extends WP_Widget {

function __construct() {

parent::__construct(

// widget ID

‘HO_widget’,

// widget name

__(‘Hostonce Sample Widget’, ‘ HO_widget_domain’),

// widget description

array( ‘description’ => __( ‘Hostonce Widget Tutorial’, ‘HO_widget_domain’ ), )

);

}

public function widget( $args, $instance ) {

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

echo $args[‘before_widget’];

//if title is present

if ( ! empty( $title ) )

echo $args[‘before_title’] . $title . $args[‘after_title’];

//output

echo __( ‘Greetings from Hostonce.com!’, ‘HO_widget_domain’ );

echo $args[‘after_widget’];

}

public function form( $instance ) {

if ( isset( $instance[ ‘title’ ] ) )

$title = $instance[ ‘title’ ];

else

$title = __( ‘Default Title’, ‘HO_widget_domain’ );

?>

<p>

<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 ); ?>” />

</p>

<?php

}

public function update( $new_instance, $old_instance ) {

$instance = array();

$instance[‘title’] = ( ! empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;

return $instance;

}

}

Now the last step is to insert the same code into the functions.php file.

1. Log in to your WP admin. Go to Appearance. Theme. Editor. Theme Functions.

2. Paste the code at the bottom of the functions.php file. Click Update File. It will save changes.

Using the Very WordPress Custom Widget

Try the widget you just created.

1. Navigate to Appearance. Select Widgets. You should see a widget called Hostonce Sample Widget in the list of Available Widgets.

2. Drag the widget to the Sidebar section. 

3. Save the changes and visit your website. You will be greeted with the “Greetings from Hostonce.com!” widget.

Conclusion

Now you know very well about what is a widget in WordPress. WordPress widgets allow control over how your website looks and behaves. Widget development helps you customize your site in ways that fit your brand and your goals. Try building a working custom widget using the functions.php file with the help of the steps aforementioned and you will feel gifted. 

Hostonce is here to help you grow if you ever need reliable hosting support.

Frequently Asked Questions