This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How To Create Custom Widgets In WordPress

June 16, 2021

2 Min Read

WordPress widgets are used to add text, pages, social buttons, and other features in designated areas (sidebars) of your website. Some of the default widgets on installation of WordPress are archives, calendar, categories, tag clouds, pages, meta etc. There are some plugins that automatically add widgets and you can see these in Appearance > Widgets.

Custom Widgets

Let’s Create Custom Widgets

First things first, you need to remember the following three functions if you want to create custom widgets:

function widget ()

This function is responsible for rendering front-end design or how your widget (HTML layout) is going to be look like at front end of the website.

function form ()

This function give us the ability to create a form (usually contains HTML input form fields, i.e, textbox, select, etc.).

function update ()

This function gets called as soon as users hit the submit button if there is a form available in the widget. It reloads the object through AJAX request and saves (or processes) your data according to your need.

Now, you need to create a file by the name of custom-widget.php with this code:

<?php
// Creating the widget
class cw_widget extends WP_Widget
{
    function __construct()
    {
        parent::__construct(
        // Base ID of your widget
            'cw_widget',
        // Widget name will appear in UI
            __('Cloudways Widget', 'cw_widget_domain'),
        // Widget description
            array(
            'description' => __('Sample widget based on Testing Widgets',
                                     'cw_widget_domain')
        ));
    }
    // Creating widget front-end
    // This is where the action happens
    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 __($title, 'cw_widget_domain');
        echo $args['after_widget'];
    }
    // Widget Backend
    public function form($instance)
    {
        if (isset($instance['title'])) {
            $title = $instance['title'];
        } else {
            $title = __('New title', 'cw_widget_domain');
        }
      // Widget admin form
?>
<label for="<?php
        echo $this->get_field_id('title');
?>"><?php
        _e('Title:');
?>
<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);
?>" />
<?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 cw_widget ends here
// Register and load the widget
function cw_load_widget()
{
     register_widget('cw_widget');
}
add_action('widgets_init', 'cw_load_widget');

You can look into WordPress Codex for more attributes and examples.

Download Your Way Out!

Life is too short for putting codes. This is why you can just download the custom-widget.php file from here.

Integrating The Custom Widget

Integrate this file in the function.php of your theme using the following code:

require_once('custom-widget.php');

In the end, you register and load the widget. Go to Appearance > Widgets. Here you can now see your own created custom widget. Drag and drop your widget in any sidebar of your theme.

Don’t you think this is simple enough to implement?

Do tell if it was easy or not in the comments box below.

Click&Go Makes WordPress Faster

People will know see the widgets if your website loads quickly. WordPress websites hosted on the Cloudways Click&Go platform are supersonic, thanks to our super-secret optimization formula of Apache+Varnish+Ngnix+Memcached. So, don’t wait. Start your 3-day FREE trial now by clicking the banner below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Beautifully optimized hosting for WordPress and Magento”

Arda Burak [Agency Owner]

Waseem Abbas

Waseem Abbas was WordPress Community Manager at Cloudways. He loves to help people with their WordPress worries. He is a self-proclaimed "food explorer".

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!