Create a widget in the plugin. WordPress OOP example

In the last post we created a shortcode for our WordPress plugin, now let’s create a widget that will run our shortcode.

Creating WordPress shortcodes. Basic and OOP code example

April 14, 2022

Nikkofeta

Take our widget to a separate file. Add inc a folder to the root directory of our plugin. Create a new file in the folder – class-widget.php and add the code below:

<?php

class my_Widget extends WP_Widget { //extend standart wordpress widget class WP_Widget 

    function __construct(){
        parent::__construct('my_widget', esc_html__('My widget','textdomain'),array('description'=>'my widget in plugin')); //  passing data to parent class id, name, and array with parameters
    }


    public function widget($args, $instance){ //admin part
        extract($args); //get the parameters

        $title = apply_filters('widget_title',$instance['title']);

        echo $before_widget; //html before widget content

        if($title){ //If we set the title of the widget, display it
            echo $before_title . esc_html($title) . $after_title;
        }

        $fields = ''; //initialize an empty variable

        
        if($instance['price']){
            $fields .= ' price="1" ';
        }
        if($instance['user']){
            $fields .= ' user="1" ';
        }
        

        echo do_shortcode('[my_shortcode]'.$fields.']'); //run our shortcode

        echo $after_widget; //html after widget content

    }

    public function form($instance){ //front part
        if(isset($instance['title'])){ // If title not specified in the admin we do not deduce anything if it is set then we enter it
            $title = $instance['title'];
        } else {
            $title = '';
        }
        
        if(isset($instance['price'])){
            $price = $instance['price'];
        } else {
            $price = '';
        }
        
        if(isset($instance['user'])){
            $user = $instance['user'];
        } else {
            $user = '';
        }

        ?>
        <p>
            <!-- set name of our widget -->
            <label for="<?php echo $this->get_field_id('title'); ?>">Title</label> 
            <input class="widefat" type="text" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo esc_attr($title); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('price'); ?>">Show Price Field</label>
            <input type="checkbox" name="<?php echo $this->get_field_name('price'); ?>" id="<?php echo $this->get_field_id('price'); ?>" <?php checked($price, 'on'); ?> />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('agent'); ?>">Show User Field</label>
            <input type="checkbox" name="<?php echo $this->get_field_name('user'); ?>" id="<?php echo $this->get_field_id('user'); ?>" <?php checked($user, 'on'); ?> />
        </p>
    <?php
    }

    public function update($new_instance,$old_instance){ //save our widget

        $instance = $old_instance;

        $instance['title'] = strip_tags($new_instance['title']);
        $instance['price'] = strip_tags($new_instance['price']);
        $instance['user'] = strip_tags($new_instance['user']);

        return $instance;

    }
} 

Let’s register our widget:

<?php 
function register_widget_function(){
    register_widget('my_widget');
}

add_action('widgets_init', 'register_widget_function');
?>

Attach the widget file to the main plugin file pluginname.php

require plugin_dir_path(__FILE__) . '/inc/class-widget.php';