How do I create a form inside my back end of widget and display it in a certain area for the end of my widget?

I have used the youtube video: (https://www.youtube.com/watch?v=OJdIUU1pjl4&t=1261s) to learn how to create my first custom widget. From here I have create a class with a front end display and a backend display (forms) I want to create a form to post the information, then gets saved to the database that later gets generated on the front end.

I have done this with an options page using update_option() and get_option() however, this would be a hard coded variable and since someone can use my widget in multiple places I would want each one to have a unique storage.

Here is currently what I have with php variables with no values because I am uncertain how to make my form post save the details to the database.

    //Back-end display of widget
    public function form($instance) {
        ?>
        <form method="post">
            <label for="inner-text">Inside Text</label>
            <input name="inner-text" type="text">
            <label for="bg-image">Background Image</label>
            <input name="bg-image" type="image">
        </form>
        <?php
    }
//front end display of widget
public function widget($args, $instance ) {
        echo $args['before_widget'];
        ?>
//$bg_img & $inner_text are currently unassigned but would like to use the back end to assign them
            <div class="bg-img" style="background: url('<?= $bg_img ?>');">
                <div class="container">
                    <div class="inner-rectangle">
                        <?= $inner_text ?>
                    </div>
                </div>

            </div>
        <?php
        echo $args['after_widget'];

        return;
}

The reason I have refrained from using get_option() is because it is a static variable and can’t have a unique value for each widget.

Answer

Use get_field_name() & get_field_id() * $instances to display

 //Back-end display of widget
    public function form($instance) {
//        DECLARE VARIABLES
        $inner_text = '';
        $widget_background = '';
        if($instance) {
            $inner_text = esc_textarea($instance['inner_text']);
            $widget_background = esc_url($instance['widget_background']);
        }
        ?>


        <form method="post">
            <label for="<?php echo $this->get_field_id('widget_background'); ?>"><?php _e('Widget Background URL', 'wp_widget_plugin'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('widget_background'); ?>" name="<?php echo $this->get_field_name('widget_background'); ?>" type="text" value="<?php echo $widget_background; ?>">
            <label for="<?php echo $this->get_field_id('inner_text'); ?>"><?php _e('Inner text', 'wp_widget_plugin'); ?></label>
            <textarea class="widefat" id="<?php echo $this->get_field_id('inner_text'); ?>" name="<?php echo $this->get_field_name('inner_text'); ?>" type="text" value=""><?php echo $inner_text; ?></textarea>
        </form>
        <?php
    }
//    AUTOMATICALLY UPDATE THE STORED FIELDS
    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        // Fields
        $instance['inner_text'] = strip_tags($new_instance['inner_text']);
        $instance['widget_background'] = strip_tags($new_instance['widget_background']);
        return $instance;
    }
//front end display of widget
public function widget($args, $instance ) {
        echo $args['before_widget'];
        ?>
            <div class="bg-img" style="background: url('<?= $instance['widget_background'] ?>');">
                <div class="container">
                    <div class="inner-rectangle">
                        <?= $instance['inner_text']?>
                    </div>
                </div>

            </div>
        <?php
        echo $args['after_widget'];

        return;
    }
}

Advertisement

Answer