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

What makes WordPress awesome is that fact that you can customize its basic framework through the use of themes, plugins, and widgets. The latter has become the go-to option for WordPress beginners, because they don’t need to learn PHP and understand code to be able to use widgets.

Although the default mindset is that widgets are for beginners, a lot of expert WordPress developers have turned their attentions to creating custom widgets 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 its name implies, custom widgets are created out of the need to expand the basic functions of existing WordPress widgets. 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. 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

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. In the case of widgets, the upgraded WordPress platform came with an extended widget class called WP_Widget. This new construct can be divided into five parts, each part being a necessary step to creating custom widgets.

Initialization: This first portion defines the widget ID, name, and description. It makes use of the function _construct() to set the initial widget information and options. It’s also 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: This part – defined in form() – handles the form function of the widget, specifically the Edit interface in the Admin Widgets console

Settings update: 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.

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.

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

2. Add data to the _construct function.

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

}

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

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
}

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

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;

}

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

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;

}

6. Register the custom widget in WordPress

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

7. Link your widget to functions.php

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:

require(“widgets/mywidget.php”);

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.

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

Making a custom WordPress widget may be painstaking at the start, but imagine the benefits that it can bring your website. Remember that you’re making these custom widgets not for yourself, but for the convenience of your site visitors.

Create custom widgets on your WordPress website using TemplateToaster website builder