How to Create a Custom Widget in WordPress?

Are you beginners and learning WordPress development coding from scratch? And you want to create an own custom widget in WordPress then you are in the right place. In this tutorial, we will learn how you can create a WordPress widget and show the content dynamically.

What is a WordPress Widget?

WordPress widgets are already built functionality to show some content at the frontend. You have to just drag and drop the widget in the sidebar section. You can show them in the frontend at the widget area OR where you have called any sidebar.

When you install fresh WordPress it provides us some common widgets by default, you can use them with any WordPress theme.

Default WordPress Widget:
Archives, Audio, Calendar, Categories, Custom HTML, Gallery, Image, Meta, Navigation Menu, Pages, Recent Comments, Recent Posts, RSS, Search, Tag Cloud, Text, Video, etc.

With the help of these widgets, you can show the contact form, images, recent posts, comments in the sidebar of your widget area.

Basic Functions of Widget Development

To create a custom widget in WordPress, you have to use WP_Widget class. We will extend WP_Widget class to create a new widget. In the widget class, you have added the following functions but you can create your own more functions in the class.

• __construct(): function to set the widget ID, title, description etc.
• widget(): function to display the widget content
• form(): function to create the form for input value
• update(): function to store the value in database

Basic Widget Structure

// Extending the Widget Class 
class YBC_Widget extends WP_Widget {
 
	// The construct function  
	function __construct() {
	 
	}
	  
	// Widget front-end
	public function widget( $args, $instance ) {
	 
	}
	          
	// Widget Backend 
	public function form( $instance ) {
	 
	}
	      
	// Store the value in database
	public function update( $new_instance, $old_instance ) {
	 
	}
 
}

After declaring these function, you have to register the widget with the register_widget function. See the below function.

// Register the widget
function register_custom_widget() {

    register_widget( 'YBC_Widget' );

}
add_action( 'widgets_init', 'register_custom_widget' );

You have to add all functions and widget class in your active theme’s functions.php file OR you can create a custom plugin for it.

OK. Let’s get started to create the custom basic widget in WordPress.

Create Custom Widget in WordPress

Let’s see the all code together with all code for making a simple custom widget.

Add the following code in your theme’s functions.php file OR you can create a custom plugin with this code.

class YBC_Widget extends WP_Widget {
  	
  	// The construct function 
	function __construct() {
		parent::__construct(
			'ybc_widget', // Base Widget ID
			'YBC Widget', // Widget Name
			array('description' => __( 'Simple custom widget to show text'))
		);
	}
	  
	// Widget front-end
	public function widget( $args, $instance ) {
		extract( $args );

		$title = apply_filters( 'widget_title', $instance['title'] );
		  
		echo $before_widget;
		if ( $title ) {
			echo $before_title . $title . $after_title;
		}

		echo 'Hello, World!';
		echo $after_widget;
	}
	          
	// Widget Backend  
	public function form( $instance ) {
		if( $instance) {
			$title = esc_attr($instance['title']);
		} else {
			$title = '';
		}
		?>
		<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 $title; ?>">
		</p>
		<?php 
	}
	      
	// Store the value in database      
	public function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		return $instance;
	}

}

// Register the widget
function register_custom_widget() {
    register_widget( 'YBC_Widget' );
}
add_action( 'widgets_init', 'register_custom_widget' );

After adding the above code to your theme’s functions.file, you will see your custom widget in the widget section. Go to this path Appearance > Widgets to check, Is it showing there?

See the following images to showing at the backend under the widgets section.

So, Finally, we have created our own custom widget in wordpress. If you have any doubt or questions please let me know in the comment section. I’ll help you with that and explain you in brief.