How to Create WordPress Custom Widgets?

Last Updated : 06 Jun, 2024

Creating custom widgets in WordPress can significantly enhance your website's functionality by allowing you to add specific features and content to your sidebar or other widgetized areas. This article will guide you through the process of creating custom widgets, explaining different approaches and providing clear examples for each method.

There are three primary approaches to creating custom widgets in WordPress:

Table of Content

By using a plugin
By Writing Code in the Theme's functions.php File
By using a Custom Plugin

By using a plugin

Go to your WordPress Dashboard.
Navigate to "Plugins" > "Add New."
Search for "Widget Options" or "SiteOrigin Widgets Bundle."
Click "Install Now" and then "Activate."

Step 2: Configure the Plugin:

Follow the plugin’s instructions to create a custom widget.
Use the plugin’s interface to define the content and settings of your widget.

Go to "Appearance" > "Widgets."
Drag and drop your custom widget to the desired widgetized area.

Syntax:

No coding is required for this approach as it is handled through the plugin’s interface.

Example:

Using "SiteOrigin Widgets Bundle":

Install and Activate: Go to "Plugins" > "Add New" > Search "SiteOrigin Widgets Bundle" > Install > Activate.
Create Widget: Navigate to "Plugins" > "SiteOrigin Widgets" > Create New Widget.
Add to Sidebar: Go to "Appearance" > "Widgets" > Drag your new widget to the sidebar.

Output: The widget will appear in the widgetized areas defined by the plugin, fully functional based on the configuration settings you applied through the plugin interface.

By Writing Code in the Theme's functions.php File

For more control, you can create custom widgets by adding code to your theme’s functions.php file. This approach requires basic PHP and WordPress coding knowledge.

Step 1: Open functions.php:

Navigate to your theme’s directory.
Open functions.php in a code editor.

Define a new widget class that extends WP_Widget.
Register the widget using widgets_init action hook.

Example: Add to functions.php. Save the functions.php File and go to "Appearance" > "Widgets" in your WordPress dashboard. You should see "My Custom Widget" available to add to your sidebar.

PHP

// Define the widget class
class My_Custom_Widget extends WP_Widget {
    // Widget settings and initialization
    function __construct() {
        parent::__construct(
            'my_custom_widget', 
            esc_html__('My Custom Widget', 'text_domain'), 
            array('description' => esc_html__('A Custom Widget',
                                              'text_domain'), )
        );
    }

    // Front-end display of widget
    public function widget($args, $instance) {
        echo $args['before_widget'];
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title',
                 $instance['title']) . $args['after_title'];
        }
        echo esc_html__('Hello, World!', 'text_domain');
        echo $args['after_widget'];
    }

    // Back-end widget form
    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] :
                  esc_html__('New title', 'text_domain');
        ?>
        <p>
        <label for="<?php echo esc_attr($this->get_field_id('title')); ?>">
        <?php esc_attr_e('Title:', 'text_domain'); ?></label> 
        <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" 
                               name="<?php echo esc_attr($this->get_field_name('title')); ?>" 
                               type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }

    // Save widget form values
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ?
                             strip_tags($new_instance['title']) : '';
        return $instance;
    }
}

// Register the widget
function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');

Output: After adding the code to functions.php, the widget will be available in the "Widgets" section of the WordPress admin, ready to be dragged into any widget area.

By using a Custom Plugin

Creating a custom plugin for your widget provides modularity and reusability. This approach is ideal for distributing your widget or maintaining it separately from your theme.

Step 1: Create a Plugin Folder:

Navigate to wp-content/plugins directory.
Create a new folder named my-custom-widget.

Step 2: Create the Main Plugin File:

Inside my-custom-widget folder, create a file named my-custom-widget.php.
Add plugin header information and widget code.

Example: Create and add code to my-custom-widget.php:

PHP

<?php
/*
Plugin Name: My Custom Widget
Description: A simple custom widget
Version: 1.0
Author: Your Name
*/

// Define the widget class
class My_Custom_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'my_custom_widget', 
            esc_html__('My Custom Widget', 'text_domain'), 
            array('description' => esc_html__('A Custom Widget',
                                              'text_domain'), )
        );
    }

    // Front-end display of widget
    public function widget($args, $instance) {
        echo $args['before_widget'];
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title',
                  $instance['title']) . $args['after_title'];
        }
        echo esc_html__('Hello, World!', 'text_domain');
        echo $args['after_widget'];
    }

    // Back-end widget form
    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] :
                    esc_html__('New title', 'text_domain');
        ?>
        <p>
        <label for="<?php echo esc_attr($this->get_field_id('title')); ?>">
         <?php esc_attr_e('Title:', 'text_domain'); ?></label> 
        <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>"
                               name="<?php echo esc_attr($this->get_field_name('title')); ?>"
                               type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }

    // Save widget form values
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ?
                                strip_tags($new_instance['title']) : '';
        return $instance;
    }
}

// Register the widget
function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');
?>

Activate the Plugin:

Go to "Plugins" in your WordPress dashboard.
Activate "My Custom Widget."
Navigate to "Appearance" > "Widgets" to add your new widget to a sidebar.

Output: Activating the custom plugin will register the new widget, making it available in the "Widgets" section of the WordPress admin, where it can be placed in any widgetized area.

Conclusion

By following these approaches, you can create custom widgets in WordPress, providing enhanced functionality and unique content presentation on your website. Each method offers different levels of control and complexity, allowing you to choose the best approach for your needs.

How to Add Widgets in WordPress ?

Anonymous

Improve

Article Tags :

How to Create WordPress Custom Widgets?

By using a plugin