Create a wordpress widget with multiple textarea

class ad_widget extends WP_Widget {
function __construct() {
    $widget_ops = array( 'classname' => 'ad-widget-container', 'description' => __( ' Ad WIDGET' ) );
    parent::__construct( 'ad-widget', __( 'Ad widget', 'test' ), $widget_ops );
}
function widget( $args, $instance ) {
    extract( $args, EXTR_SKIP );
    $title = empty( $instance['title'] ) ? '' : apply_filters( 'widget_title', $instance['title'] );
    $text = empty( $instance['text'] ) ? '' : apply_filters( 'widget_text', $instance['text'] );
    echo $args['before_widget'];
    if ( $title )
        echo $args['before_title'] . $title . $args['after_title'];

    echo '<div class="cutom-widget">';
       echo $text;
    echo '</div>';
    echo $args['after_widget'];
}
function update( $new_instance, $old_instance ) {
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['text'] =  $new_instance['text'];
    return $instance;
}    
function form( $instance ) {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
    $title = esc_attr( $instance['title'] ); 
    $text = esc_textarea($instance['text']); ?>
    <p>
       <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'test' ); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" />
        <textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea>
    *<a>Add more text area</a>
    <a>delete text area </a>*
    </p><?php
}

}
This is a simple widget with a text-box and text-area.I need something like when i click on “add more text area” it adds a textarea with different id’s and saves different values.

Related posts

Leave a Reply

1 comment

  1. I guess you have to use JS to do it.

    1. Place or append a button on last textarea
    2. On click the button would add another textarea with appropriate markup
    3. Grab that value and append on the widget form