How to Create a Custom Widget in WordPress: Step-by-Step Guide

How to Create a Custom Widget in WordPress: Step-by-Step Guide

Do you know that you can create your own Custom Widget in WordPress, While there are tons of additional widgets that come alongside with themes and plugins. Widgets allow you to add non-content elements into a sidebar or any widget-ready area of your website.

You can use widgets to add search form, banners, advertisements, sign up forms, newslatter form and any other elements to your website you want.

It’s not a complicated process because you only need basic knowledge of WordPress and PHP. In this article, we will show you how to create a custom WordPress widget, step by step.

Creating a Basic Custom Widget in WordPress

You have two options while creating a widget. first is the paste the widget codes directly in the functions.php file of your theme and second is you can create a specific plugin to paste the widget codes.

<?php

if( ! class_exists( 'socials_list_widget' ) ) 
{
    class socials_list_widget extends WP_Widget
    {

        // constructor function where you can define your widget’s ID, name, and description.
        function __construct() { 

            parent::__construct(
                'socials_list_widget',  // Widget ID
                esc_html__( 'Socials', 'text-domain' ),   // Widget Name
                array(
                    'description' => esc_html__( 'A widget that displays your socials_list', 'text-domain' ), 
                )
            );
     
        }

        //contains the output of the widget.
        function widget($args, $instance)
        {
            extract($args);

            $fb_checkbox_var = $instance['fb_checkbox_var'];
            $tt_checkbox_var = $instance['tt_checkbox_var'];
            $linkedin_checkbox_var = $instance['linkedin_checkbox_var'];
            $wt_checkbox_var = $instance['wt_checkbox_var'];
            $tg_checkbox_var = $instance['tg_checkbox_var'];

            ?>
            <div class="blog-post-aside">
                <ul class="blog-post-share">
                    <?php if ($fb_checkbox_var): ?>
                        <li class="blog-post-share__item">
                          <a href="<?php echo esc_url($fb_checkbox_var) ?>">
                            <img src="<?php echo get_template_directory_uri(); ?>/images/svg/icon-facebook.svg" alt="">
                          </a>
                        </li>
                    <?php endif; ?>
                    <?php if ($tt_checkbox_var): ?>
                        <li class="blog-post-share__item">
                          <a href="<?php echo esc_url($tt_checkbox_var) ?>">
                            <img src="<?php echo get_template_directory_uri(); ?>/images/svg/icon-twitter.svg" alt="">
                          </a>
                        </li>
                    <?php endif; ?>
                    <?php if ($linkedin_checkbox_var): ?>
                        <li class="blog-post-share__item">
                          <a href="<?php echo esc_url($linkedin_checkbox_var) ?>">
                            <img src="<?php echo get_template_directory_uri(); ?>/images/svg/icon-linkedin.svg" alt="">
                          </a>
                        </li>
                    <?php endif; ?>
                    <?php if ($wt_checkbox_var): ?>
                        <li class="blog-post-share__item">
                          <a href="<?php echo esc_url($wt_checkbox_var) ?>">
                            <img src="<?php echo get_template_directory_uri(); ?>/images/svg/icon-whatsapp.svg" alt="">
                          </a>
                        </li>
                    <?php endif; ?>
                    <?php if ($tg_checkbox_var): ?>
                        <li class="blog-post-share__item">
                          <a href="<?php echo esc_url($tg_checkbox_var) ?>">
                            <img src="<?php echo get_template_directory_uri(); ?>/images/svg/icon-telegram.svg" alt="">
                          </a>
                        </li>
                    <?php endif; ?>
                </ul>
            </div>

            <?php
            echo balanceTags($after_widget);
        }


        //updates widget settings.
        function update($new_instance, $old_instance)
        {
            $instance = $old_instance;

            $instance['title'] = strip_tags($new_instance['title']);
            $instance['fb_checkbox_var'] = $new_instance['fb_checkbox_var'];
            $instance['tt_checkbox_var'] = $new_instance['tt_checkbox_var'];
            $instance['linkedin_checkbox_var'] = $new_instance['linkedin_checkbox_var'];
            $instance['wt_checkbox_var'] = $new_instance['wt_checkbox_var'];
            $instance['tg_checkbox_var'] = $new_instance['tg_checkbox_var'];

            return $instance;
        }


        //determines widget settings in the WordPress dashboard.
        function form($instance)
        {
            $defaults = array( 'title' => esc_html__('Social', 'cize-toolkit'), 'fb_checkbox_var' => esc_html__('https://facebook.com', 'cize-toolkit'), 'tt_checkbox_var' => esc_html__('https://twitter.com', 'cize-toolkit'),'linkedin_checkbox_var' => '','wt_checkbox_var'      => '','tg_checkbox_var'      => '');
            $instance = wp_parse_args( (array) $instance, $defaults );
            ?>
            <p>
                <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_html_e('Title:', 'cize-toolkit'); ?></label>
                <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>"
                       name="<?php echo esc_attr($this->get_field_name('title')); ?>"
                       value="<?php echo balanceTags($instance['title']); ?>"/>
            </p>

            <p>
                <label for="<?php echo  $this->get_field_id('fb_checkbox_var'); ?>"><?php echo esc_html__('Facebook', 'cize-toolkit'); ?></label>
                <input class="widefat" type="text" id="<?php echo  $this->get_field_id('fb_checkbox_var'); ?>"
                       name="<?php echo  $this->get_field_name('fb_checkbox_var'); ?>"
                       value="<?php echo balanceTags($instance['fb_checkbox_var']); ?>"/>
            </p>

            <p>
                <label for="<?php echo  $this->get_field_id('tt_checkbox_var'); ?>"><?php echo esc_html__('Twitter', 'cize-toolkit'); ?></label>
                <input class="widefat" type="text" id="<?php echo  $this->get_field_id('tt_checkbox_var'); ?>"
                       name="<?php echo  $this->get_field_name('tt_checkbox_var'); ?>"
                       value="<?php echo balanceTags($instance['tt_checkbox_var']); ?>"/>
            </p>

            <p>
                <label for="<?php echo  $this->get_field_id('linkedin_checkbox_var'); ?>"><?php echo esc_html__('Linkdin', 'cize-toolkit'); ?></label>
                <input class="widefat" type="text" id="<?php echo  $this->get_field_id('linkedin_checkbox_var'); ?>"
                       name="<?php echo  $this->get_field_name('linkedin_checkbox_var'); ?>"
                       value="<?php echo balanceTags($instance['linkedin_checkbox_var']); ?>"/>
            </p>

            <p>
                <label for="<?php echo  $this->get_field_id('wt_checkbox_var'); ?>"><?php echo esc_html__('Whatsapp', 'cize-toolkit'); ?></label>
                <input class="widefat" type="text" id="<?php echo  $this->get_field_id('wt_checkbox_var'); ?>"
                       name="<?php echo  $this->get_field_name('wt_checkbox_var'); ?>"
                       value="<?php echo balanceTags($instance['wt_checkbox_var']); ?>"/>
            </p>

            <p>
                <label for="<?php echo  $this->get_field_id('tg_checkbox_var'); ?>"><?php echo esc_html__('Telegram', 'cize-toolkit'); ?></label>
                <input class="widefat" type="text" id="<?php echo  $this->get_field_id('tg_checkbox_var'); ?>"
                       name="<?php echo  $this->get_field_name('tg_checkbox_var'); ?>"
                       value="<?php echo balanceTags($instance['tg_checkbox_var']); ?>"/>
            </p>
            <?php
        }
    }
}

//Registering WordPress Custom Widget
function register_widget() 
{
    register_widget( 'socials_list_widget' );
}
add_action( 'widgets_init', 'register_widget' );