Looking To Create A Custom WordPress Widget – Find The Best Way Here

WordPress is probably the most convenient and popular means of developing a website at the present date. In fact, one in every four websites are built using WordPress today. It is an open-source Content Management Software that can be utilized by everyone that too without the need to pay anything.

In addition to providing a large number of widgets along with the themes and plugins, WordPress also provides the opportunity to the users to create custom widgets manually. The basic knowledge of WordPress and PHP is all that is required to achieve the same.

Here in this article, we will understand what exactly is a WordPress widget and cover the basic method to create the same but before this, let us know if you are looking to hire experienced WordPress developers for the purpose of developing a fully-functional WordPress widget.

WordPress Widget – A Brief Introduction

Widgets are basically the segments of content that can be attached to your site’s sidebars, footers, and other areas. Widgets allow you to add additional features or functions to your site, without the need to write any code. The most common widgets that are added to a site include post lists, menus, banner ads, calendars, social icons, and so on. 

The place where you can add these widgets to your site depends on your WordPress theme.

Several themes hold sidebar and footer widget areas while others permit you to add the widgets in the header, homepage, as well as the other areas.

WordPress offers numerous built-in widgets by default that possess the fundamental utility features and are cooperative with nearly all WordPress themes. However, the built-in widgets offered by WordPress are seldom not able to accomplish the tasks you demand from them. WordPress allows you to create your own custom Widgets in such situations. The method for the same is discussed below

How To Create A Custom Widget In WordPress

You can add your custom widget code in WordPress in a number of ways. You can build a site-specific plugin and combine your widget code there. You can also place the code in the functions.php file of your theme. Though, it will be possible only when that specific theme is active. One more tool that you can utilize is the Code Snippets plugin. This plugin enables you to effortlessly combine custom code with your WordPress website.

Let us proceed towards building a simplistic WordPress widget that will introduce you to the WordPress widget class.

Creating a Basic WordPress Widget With The Help Of WordPress Widget Class

WordPress possesses a built-in widget class and every new WordPress widget extends this class. Though this class holds a total of 18 methods in and all, we will mainly focus on the following four methods here.

• construct(): This method is used to create the widget ID, title, and description.
• widget: This is the method in which we specify the output produced by the widget.
• form: This is where we build the form with widget options concerning backend.
• update: This is where we store widget options within the database.
• The above four methods can be used in the WP_Widget class with the help of below code

// Creating the widget

class wpb_widget extends WP_Widget { 

// The construct part 

function __construct() {

}

// Creating widget front-end

public function widget( $args, $instance ) { 

}

// Creating widget Backend

public function form( $instance ) { 

}

// Updating widget replacing old instances with new

public function update( $new_instance, $old_instance ) {

}

// Class wpb_widget ends here

Below is the ultimate portion of code with the help of which we register the widget and load it within WordPress.

function wpb_load_widget() {

    register_widget( ‘wpb_widget’ );

}

add_action( ‘widgets_init’, ‘wpb_load_widget’ );

Now, you can combine the above code as shown below to create a basic WordPress plugin.

// Creating the widget

class wpb_widget extends WP_Widget {  

function __construct() {

parent::__construct(

// Base ID of your widget

‘wpb_widget’,  

// Widget name will appear in UI

__(‘WPBeginner Widget’, ‘wpb_widget_domain’),

// Widget description

array( ‘description’ => __( ‘Sample widget based on WPBeginner Tutorial’, ‘wpb_widget_domain’ ), )

);

}  

// Creating widget front-end

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’];

if ( ! empty( $title ) )

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

// This is where you run the code and display the output

echo __( ‘Hello, World!’, ‘wpb_widget_domain’ );

echo $args[‘after_widget’];

}

// Widget Backend

public function form( $instance ) {

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

$title = $instance[ ‘title’ ];

}

else {

$title = __( ‘New title’, ‘wpb_widget_domain’ );

}

// Widget admin form

?>

<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

}

// 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’] ) : ”;

return $instance;

}

 // Class wpb_widget ends here

}

 // Register and load the widget

function wpb_load_widget() {

    register_widget( ‘wpb_widget’ );

}

add_action( ‘widgets_init’, ‘wpb_load_widget’ );

Paste the above code in your custom plugin or functions.php file of the theme.

Now, go to Appearance -> Widgets. A new WPBeginner widget will be available on the screen. Move this widget to the sidebar by dragging and dropping it.

Give the appropriate title to the widget and save your changes by clicking on the save button.

Now, visit your website to notice the changes

Final Words

Widgets are one of the indispensable features of WordPress. They are an excellent solution whenever you are not able to find something that will fulfill your particular requirement.

Widgets allow you to join non-content elements with the sidebar or any other widget-ready area of your site. Widgets can be used to attach banners, newsletter sign up forms, advertisements, and other elements with your website. This way they can make your website more appealing and aid you to achieve additional signups or turn more visitants into customers.

Hope this article will aid you to ascertain how you can create a custom WordPress widget in an easy manner. However, you can meet our experienced WordPress developers today for better assistance!