In the first place, the flexibility of WordPress as a content management system (CMS) platform has led millions of people to make it their preference for creating websites of all sorts. Also, the number one website framework in the world brings individuals, business owners, and organizations together, to establish an online presence conveniently and powerfully.

But what makes WordPress awesome? Again it is the fact that you can customize its basic framework through the use of themes, plugins, and widgets. Also, the latter has become the go-to option for WordPress beginners. Identically because they don’t need to learn PHP and understand coding to be able to use widgets.

Although the default mindset is that widgets are for beginners, a lot of expert WordPress developers are turning their attentions to create custom widgets. And it also allows them to further enhance the functionality of their websites. Here at Templatetoaster WordPress website builder, I will discuss how to make a custom widget that you can use in your WordPress-powered website.

Importance of Custom WordPress Widgets

As the name implies, custom widgets are created out of the need to expand the basic functions of existing WordPress widgets. Therefore, some web developers and WordPress theme builders may find the default widgets limited. And so it’s important to be able to make their own widgets as integral parts of the website design.

In a nutshell, you might relate widgets to site features. Moreover, the more custom widgets you have, the greater will be the site’s functionality. On top of that, widgets are designed not for the theme developer but rather for the theme user or site owner.

Creating custom WordPress Widget

In addition, the folks at WordPress have continuously developed the framework through the years. But it was in WP 2.8 when the fun really started to happen. But in the case of widgets, the upgraded WordPress platform came with an extended widget class called WP_Widget. Also, this new construct can be divided into five parts, each part being a necessary step to creating custom widgets.

Initialization: In this first position, defines the widget ID, name, and description. Moreover, it makes use of the function _construct() to set the initial widget information and options. Mostly, in this part where referencing of CSS or Javascript is done.

Front-end display: Through widget(), the visual elements of the widget are defined and the HTML code is displayed. In short, this defines how the user will see the widget.

Back-end display: As much as, this part – defined in the form() – handles the form function of the widget. Specifically the Edit interface in the Admin Widgets console.

Settings update: Moreover, the function update() section processes and validates the entries of widget settings from the back-end.

Registration: Finally, this section – init() – registers the widget for use in WordPress. This step is essential in making sure that the custom widget appears in the list of available widgets for sidebars.

A Step-by-Step Guide to Making Custom Widgets

Here’s a simple example of how to make your own custom WordPress widgets from scratch.

1. Create an extended WP_Widget class.

[box title=””]

Start with this sample code:
<?php
class Mycustom_Widget extends WP_Widget {
}
?>

[/box]

2. Add data to the _construct function.

[box title=””]

public function __construct() {

parent::__construct(
‘thisisanew_widget’,
__( ‘My Custom Widget’, ‘thisisanewblock’ ),
array(
‘classname’ => ‘thisisanew_widget’,
‘description’ => __( ‘Enter a custom description for your new widget’, ‘mycustomdomain’ )
)
);

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

}

[/box]

3. Define the visual elements of the widget for the Edit / Admin interface, using the form().

[box title=””]

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
}

[/box]

4. Add the function widget() to define how the widget looks on the website sidebar.

[box title=””]

public function widget( $args, $instance ) {

extract( $args );

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

echo $before_widget;
if ( $title ) {echo $before_title . $title . $after_title;}
if ( $paragraph ) {echo $before_paragraph . $paragraph . $after_paragraph;}
echo $after_widget;

}

[/box]

5. Indicate how the widget form values are processed, using the update() function.

[box title=””]

public function update( $new_instance, $old_instance ) {

$instance = $old_instance;

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

return $instance;

}

[/box]

6. Register the custom widget in WordPress.

[box title=””]

add_action( ‘widgets_init’, function(){
register_widget( ‘Mycustom_Widget’ );
});

[/box]

7. Link your widget to functions.php.

At the same time, create a PHP file (in our case, mywidget.php) containing the custom widget codes. Upload the file in your website’s theme folder, and add this in functions.php:

[box title=””]require(“widgets/mywidget.php”);[/box]

If you were able to follow these steps to the letter, you should be able to see the widget as one of the choices in the Widgets interface of the Admin console. You may now use the custom widget just like you would any other widget – that is, by dragging the widget tab to your desired sidebar, and entering information in the dropdown widget pane.

Benefits of Custom WordPress Widgets

If you’re not pumped up to make your own custom WordPress widget, here’s a list of benefits that you may potentially get:

Extended functionality: Open your website up to more features that your customers will like and continue to use.
Improved user experience: By putting new widgets in your sidebars, you could potentially make browsing easier for your visitors.

An Uptick in SEO: This may depend on the usefulness and value of your custom widget, but as more people return to your site because of its amazing functionality, search spiders will detect an upswing in your visitor count and may lead you to higher search rankings.

The Bottom Line – Customizing WordPress Widget: Good or Bad?

Making a custom WordPress widget may be painstaking at the start, but imagine the benefits that it can bring to your website. Remember that you’re making these custom widgets not for yourself, but for the convenience of your site visitors. Moreover, customizing the WordPress widget is hands-down useful in providing users with important and additional information like following links, call to action, direct to a post and more. And, without any doubt widgets is something that makes WordPress outperform as a CMS platform. Customizing the widgets allow you to make your WordPress website more interesting and user-friendly which ultimately helps in more lead generation and better conversions.

WordPress comes with several built-in widgets, or install more using WordPress plugins. but the good part is you can even customise these widgets, using the widget API. Well, that is enough for now on my part. Let me know which WordPress widget do you find the most interesting. Also, let me know if you customized and WordPress widget using the steps mentioned in this post.

[call_to_action color=”gray” button_icon=”download” button_icon_position=”left” button_text=”Download Now” button_url=”https://templatetoaster.com/download” button_color=”violet”]
Create custom widgets on your WordPress website using TemplateToaster website builder
[/call_to_action]