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.

📣 Try the fastest hosting platform with pay-as-you-go pricing & 24/7 expert support! MIGRATE NOW →

How to Create Custom Widgets on WordPress in 2022 [Easy Guide]

Updated on January 14, 2022

2 Min Read
wordpress custom widgets

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 the installation of WordPress are archives, calendars, categories, tag clouds, pages, meta, etc. Some plugins automatically add widgets, and you can see these in Appearance > Widgets.

Custom Widgets

How to Create Custom Widgets on WordPress

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) will look like the front end of the website.

function form ()

This function allows us 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 a form is 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 download the custom-widget.php file from here.

How to Integrate the Custom Widget

You can integrate the custom widget 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 me if it was easy or not in the comments box below.

Click&Go Makes WordPress Faster

People will know to 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

Sarim Javaid

Sarim Javaid is a Digital Content Producer at Cloudways. He has a habit of penning down his random thoughts and giving words and meaning to the clutter of ideas colliding inside his mind. His obsession with Google and his curious mind add to his research-based writing. Other than that, he's a music and art admirer and an overly-excited person.

×

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!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now