0

I have made a widget with input fields. I want to make an add more button to dynamically add the input field the first input field is the default. How can I make it is it possible to do that?

Here is my widget code :

<?php 
class ExampleClasss extends WP_Widget {
    function __construct() {
        // Widget settings
        $widget_ops = array( 'classname' => 'exampleclass', 'description' => esc_html__( 'This is Just a practice widget', 'ex' ) );
        // Create the widget
        parent::__construct( 'exampleclass', __('Example widget', 'ex'), $widget_ops );
    }

    function widget( $args, $instance ) {
        extract( $args, EXTR_SKIP );
        $title = apply_filters( 'widget_title', $instance['title'] );
        $link1 = empty( $instance['link1'] ) ? '' : $instance['link1'];
        echo $before_widget;
        if ($title)
            echo $before_title . $title . $after_title; ?>
        <div class=""><?php echo wp_kses_post( $link1 ); ?></div>
        <?php
        echo $after_widget;
    }

    function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = sanitize_text_field( $new_instance['title'] );
        $instance['link1'] = sanitize_text_field( $new_instance['link1'] );
        return $instance;
    }


    function form( $instance ) {
        $instance = wp_parse_args( (array) $instance, array( 'Title' => esc_html__( 'About Me', 'ex' ) ) );

        $title = ( !empty($instance['title']) ? esc_attr( $instance['title'] ) : 'Title' );
        $link1 = ( !empty($instance['link1']) ? esc_textarea( $instance['link1'] ) : 'Link 1' );

        #   T I T L E
        $output = "<p>";
        $output .= "<label for='" . esc_attr( $this->get_field_id('title') ) . "'>".esc_html__( 'Title', 'ex')."</label>";
        $output .= "<input type=\"text\" class=\"widefat\" id='". esc_attr( $this->get_field_id( 'title' ) ) ."' name='". esc_attr( $this->get_field_name('title') ) ."' value='".$title."'></p>";

        #   A B O U T    M E     T E X T
        $output .= "<p>";
        $output .= "<label for='" . esc_attr( $this->get_field_id('link1') ) . "'>".esc_html__( 'Link 1 ' , 'ex' )."</label>&times;";
        $output .= "<input type=\"text\" class=\"widefat\" id='". esc_attr( $this->get_field_id( 'link1' ) ) ."' name='". esc_attr( $this->get_field_name('link1') ) ."' value='".$link1."'></p>";

        echo $output;
    }
}
function Example() {
    register_widget( 'ExampleClasss' );
}
add_action( 'widgets_init', 'Example' );


?>

Here is my screenshot. Hope this will clear my question!

enter image description here

1 Answer 1

1

How about jQuery append method? To make a counter, simply increment i variable every click.

$('body').on('click', '.add-more-button', function() {
  var i = 2;
  $('.widget-input').append('<label>Link' + i + '</label><input>');
  i++;
}

This is just an idea, I guess someone more experienced can develop it further.

2
  • are they work dynamically using the js means the information will save dynamically will thanks Commented Aug 3, 2017 at 6:48
  • To make all this dynamic, I think you should pass PHP vars to JS. Because every time widget instance is different. For example: <input id="widget_popular_posts-2-title" name="widget_popular_posts[2][title]" type="text"> So this values should be passed to JS and appended with some number, cuz they need to be unique.
    – Alexander
    Commented Aug 3, 2017 at 7:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.