in

How to Create a Custom WordPress Widget?

How to Create a Custom WordPress Widget?

There is no doubt in saying that WordPress is the most customisable CMS platform. Be it the appearance or the functionality; there is no limit to the customisation options available for WordPress. You get to choose from different, plugins, themes and widgets that can increase the user experience of the website. Almost every WordPress site owner uses various widgets in a sidebar or any other place where they can place the widget.

Though WordPress provides an option to create a custom text widget, but sometimes the user wants more than just a plain text widget. However, most of the users settle for the widgets provided by different plugins or developers. All these users are unaware of the fact that they can create their own custom widget for their WordPress website.

The process for creating a widget is a little complex and requires some coding and PHP knowledge. If you are sure that you can meet the necessary requirements, then here we present you with the complete method of creating a custom widget.

Step 1

Most of the people add the codes to the functions.php file which can directly affect your complete website. The best way to avoid your website from crashing is by creating a site-specific plugin. It is the place where you can add custom snippets to your website. To create a site-specific plugin, the first thing you need to do is connect with your FTP client and open the WordPress root directory.

Step 2

Afterwards, you need to open the wp-content> Plugins folder. Here you need to create a new folder and name it as yourwebsitename-plugin. Now you need to create a text file on your local system and name it as yourwebsitename-plugin.php.

Step 3

Now open that file using any text editor and paste the following code into it.

<?php

/*

Plugin Name: Site Plugin for yourdomain.com

Description: Site specific code changes for yourdomain.com

*/

/* Start Adding Functions Below this Line */

 

 

/* Stop Adding Functions Below this Line */

?>

Save all the changes and upload the file to the newly created yourwebsitename-plugin folder.

Step 4

After creating a site-specific plugin, you need to expand the WP_Widget class like the following code.

<?php

class Custom_Widget extends WP_Widget {

}

?>

Step 5

Now you need to add the following line to the _construction function of your site.

parent::__construct(

‘thisisanew_widget’,

__( ‘Custom Widget’, ‘thisisanewblock’ ),

array(

‘classname’ => ‘thisisanew_widget’,

‘description’ => __( ‘Write a description for your widget’, ‘customdomain’ )

)

);

 

load_plugin_textdomain( ‘thisisanewblock’, false, basename( dirname( __FILE__ ) ) . ‘/languages’ );

 

}

Step 6

Afterwards, you need to specify the visual elements of the widget. You can easily do that by adding the following code.

public function form( $instance ) {

 

$title = esc_attr( $instance[‘title’] );

$paragraph = esc_attr( $instance[‘paragraph’] );

?>

<p>

<label for=”<?php echo $this->get_field_id(‘title’); ?>”><?php _e(‘Title:’); ?></label>

<br>

<input type=”text” value=”<?php echo $title; ?>” name=”<?php echo $this->get_field_name(‘title’); ?>” id=”<?php echo $this->get_field_id(‘title’); ?>” />

</p>

<p>

<label for=”<?php echo $this->get_field_id(‘paragraph’); ?>”><?php _e(‘Text’); ?></label>

<br>

<textarea rows=”10″ cols=”16″ name=”<?php echo $this->get_field_name(‘paragraph’); ?>” id=”<?php echo $this->get_field_id(‘paragraph’); ?>”><?php echo $paragraph; ?></textarea>

</p>

<?php

}

Step 7

In the next step, you will be updating the database information of your WordPress through the update() method. It has two approaches for this method, one is the $new_instance, and the other is $old_instance which contains the new and existing settings of the widget form. Paste the following code to update the database.

public function update( $new_instance, $old_instance ) {

 

$instance = $old_instance;

 

$instance[‘title’] = strip_tags( $new_instance[‘title’] );

$instance[‘paragraph’] = strip_tags( $new_instance[‘paragraph’] );

 

return $instance;

 

}

Step 8

Once you are done with all of the above codings, you need to register your custom widget to your WordPress. Paste the following code into the file and save all the changes.

add_action( ‘widgets_init’, function(){

register_widget( ‘Custom_Widget’ );

});

Step 9

You have now successfully created the custom widget for your site and registered it with your WordPress. Now head over to the WordPress admin dashboard and navigate to the Appearance> Widgets page. Here you can see your newly created custom widget which you need to drag and drop in any of the sidebars. You can now visit your website to check whether your widget is working perfectly or not.

Why should you use Custom Widgets for WordPress?

If you are confused that whether you should go for custom widgets or not, then here we present you with some of the reasons why you should be using these type of widgets on your WordPress website.

#1 Exclusive Features

The motive of creating a custom widget for your website is to get exclusive features which no other widget is providing. You can customize the features and add new functionalities to it to expand its effectiveness. Moreover, you will be adding these features not only for yourself but for your users as well which will ultimately enhance the user experience of your website. You can take suggestions from your users and know what they would like to see in the widgets. By knowing this information, you will be getting new ideas for new functionalities and provide the users what they want.

#2 Higher SEO Rankings

As you will be providing some of the exclusive features on your website, your users are more likely to return to your website rather than finding any alternative which will increase the traffic to your website. Moreover, when the user experience of your website is better than the others, the users are more likely to share the website with their friends or colleagues. This boost in traffic will help you in enhancing the rankings of your website on the search engine result pages.

Endnote

This was the complete process of creating a custom widget for WordPress. You can make as many widgets as you want and add endless features to them. You need to have the mediocre coding knowledge to customize the widgets. If you are adding the codes directly in the functions.php file, then you need to make sure that you create a backup of that file as a single comma can break down the website.

Leave a Reply

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

How to Add Signature or Ads after Post Content in WordPress?

How to Add Signature or Ads after Post Content in WordPress?

Learn Lead Generation Like a PRO

How to Do Lead Generation in WordPress Like a Pro?