Title: Adding 'text' fields to widget
Last modified: August 30, 2016

---

# Adding 'text' fields to widget

 *  [Jasnick](https://wordpress.org/support/users/jasnick/)
 * (@jasnick)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/)
 * I am creating a widget plugin to make it easier for an editor to add data. It
   has a title,3 text fields and a textarea.
    In Admin this displays as intended
   but on the front end it doesn’t. I know this is because I need to properly ID
   the text fields.
 *     ```
       // Check values
       if( $instance) {
            $title = esc_attr($instance['title']);
            $text = esc_attr($instance['text']);
            $text = esc_attr($instance['text']);
            $text = esc_attr($instance['text']);
            $textarea = esc_textarea($instance['textarea']);
       } else {
            $title = '';
            $text = '';
            $textarea = '';
       }
       ```
   
 * I have changed <?php _e…> to the correct name for each text field but I need 
   to know where else to make changes so it displays correctly at the front end.
   
   Thank you!

Viewing 14 replies - 1 through 14 (of 14 total)

 *  anonymized-13749270
 * (@anonymized-13749270)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588469)
 * Can you provide the full code within class you used for the widget ?
 *  Thread Starter [Jasnick](https://wordpress.org/support/users/jasnick/)
 * (@jasnick)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588550)
 * Hi Samuel
 * Thanks for reply
 * Not sure what it is you mean – I am new to php and widgets though not to websites.
   Is this what you require?
 *     ```
       class wp_bikes_plugin extends WP_Widget {
       // constructor
           function wp_bikes_plugin() {
               parent::WP_Widget(false, $name = __('Bikes Widget', 'wp_widget_plugin') );
           }
       ```
   
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588581)
 * Hi nick,
 * I meant the entire class, so I could look up the public widget function where
   you could echo the fields.. and you provided the constructor part 😉
 * Anyways, I have wrote you an example, add this code to your functions.php file:
 *     ```
       class my_custom_widget extends WP_Widget {
       	function __construct() {
       		parent::__construct(
       			'yiw_pro_widget',
       			__('My Custom Widget', 'wordpress'),
       			array( 'description' => __( 'my custom widget from w.org support forums', 'wordpress' ), )
       		);
       	}
       	public function widget( $args, $instance ) {
       		$title = apply_filters( 'widget_title', $instance['title'] );
       		$name = apply_filters( 'widget_title', $instance['name'] );
       		$email = apply_filters( 'widget_title', $instance['email'] );
       		$phone = apply_filters( 'widget_title', $instance['phone'] );
       		echo $args['before_widget'];
       		if ( ! empty( $title ) )
       			echo $args['before_title'] . $title . $args['after_title'];
       		echo "<p><strong>Name:</strong> $name</p>";
       		echo "<p><strong>Email:</strong> $email</p>";
       		echo "<p><strong>Phone number:</strong> $phone</p>";
       		echo $args['after_widget'];
       	}
       	public function form( $instance ) {
       		$title 	= ( isset( $instance[ 'title' ] ) ) ? $instance[ 'title' ] : '';
       		$name 	= ( isset( $instance[ 'name' ] ) ) ? $instance[ 'name' ] : '';
       		$email 	= ( isset( $instance[ 'email' ] ) ) ? $instance[ 'email' ] : '';
       		$phone 	= ( isset( $instance[ 'phone' ] ) ) ? $instance[ 'phone' ] : '';
       		?>
       			<p>
       				<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></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 esc_attr( $title ); ?>" />
       			</p>
       			<p>
       				<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e( 'Name:' ); ?></label>
       				<input class="widefat" id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" type="text" value="<?php echo esc_attr( $name ); ?>" />
       			</p>
       			<p>
       				<label for="<?php echo $this->get_field_id( 'email' ); ?>"><?php _e( 'Email:' ); ?></label>
       				<input class="widefat" id="<?php echo $this->get_field_id( 'email' ); ?>" name="<?php echo $this->get_field_name( 'email' ); ?>" type="text" value="<?php echo esc_attr( $email ); ?>" />
       			</p>
       			<p>
       				<label for="<?php echo $this->get_field_id( 'phone' ); ?>"><?php _e( 'Phone:' ); ?></label>
       				<input class="widefat" id="<?php echo $this->get_field_id( 'phone' ); ?>" name="<?php echo $this->get_field_name( 'phone' ); ?>" type="text" value="<?php echo esc_attr( $phone ); ?>" />
       			</p>
       		<?php
       	}
       	public function update( $new_instance, $old_instance ) {
       		$instance = array();
       		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
       		$instance['name'] = ( ! empty( $new_instance['name'] ) ) ? strip_tags( $new_instance['name'] ) : '';
       		$instance['email'] = ( ! empty( $new_instance['email'] ) ) ? strip_tags( $new_instance['email'] ) : '';
       		$instance['phone'] = ( ! empty( $new_instance['phone'] ) ) ? strip_tags( $new_instance['phone'] ) : '';
       		return $instance;
       	}
       }
       function load_my_custom_widget() {
       	register_widget( 'my_custom_widget' );
       }
       add_action( 'widgets_init', 'load_my_custom_widget' );
       ```
   
 * And then try to replace fields or add more, you should just look into the code,
   and duplicate and rename variables and instances there..
 * Apologize, I am very bad at tutorials.
 *  Thread Starter [Jasnick](https://wordpress.org/support/users/jasnick/)
 * (@jasnick)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588582)
 * Hi Samuel
 * Thank you very much! That is excellent – and you are very good at tutorials! 
   I will try this out and get back to you with the results later.
 * Another question: you say to add it to the functions.php. If I add the following,
   can it be added to the site plugins? That is where the current one resides.
    `
   <?php /* Plugin Name: Bikes Plugin Plugin URI: [http://www](http://www) xxx Description:
   A simple plugin that adds a simple widget Version: 1.0 Author: WPExplorer Author
   URI: [http://www.xxx](http://www.xxx) License: GPL2 */` Thanks again!
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588583)
 * Hi!
 * Thank you so much for the compliments.
 * Well, actually I forgot you were working on your plugin. Add the code to your
   plugin’s file and once the plugin is active the widget will be active as well..
 *  Thread Starter [Jasnick](https://wordpress.org/support/users/jasnick/)
 * (@jasnick)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588590)
 * Hi Samuel
    This is really great! There is one thing missing. I need to add a 
   textarea after the last text field. I did try to add a textarea but it was not
   correct and messed up everything. Would you be so kind as to show me how to add
   a textarea? Thanks
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588592)
 * It’s pretty simple, just like you do with other input fields, but this time instead
   of using value attribute you echo the instance variable content inside the textarea..
   Here’s the full code:
 *     ```
       class my_custom_widget extends WP_Widget {
       	function __construct() {
       		parent::__construct(
       			'yiw_pro_widget',
       			__('My Custom Widget', 'wordpress'),
       			array( 'description' => __( 'my custom widget from w.org support forums', 'wordpress' ), )
       		);
       	}
       	public function widget( $args, $instance ) {
       		$title = apply_filters( 'widget_title', $instance['title'] );
       		$name = apply_filters( 'widget_title', $instance['name'] );
       		$email = apply_filters( 'widget_title', $instance['email'] );
       		$phone = apply_filters( 'widget_title', $instance['phone'] );
       		$bio = apply_filters( 'widget_title', $instance['bio'] );
       		echo $args['before_widget'];
       		if ( ! empty( $title ) )
       			echo $args['before_title'] . $title . $args['after_title'];
       		echo "<p><strong>Name:</strong> $name</p>";
       		echo "<p><strong>Email:</strong> $email</p>";
       		echo "<p><strong>Phone number:</strong> $phone</p>";
       		echo "<p><strong>Bio:</strong> $bio</p>";
       		echo $args['after_widget'];
       	}
       	public function form( $instance ) {
       		$title 	= ( isset( $instance[ 'title' ] ) ) ? $instance[ 'title' ] : '';
       		$name 	= ( isset( $instance[ 'name' ] ) ) ? $instance[ 'name' ] : '';
       		$email 	= ( isset( $instance[ 'email' ] ) ) ? $instance[ 'email' ] : '';
       		$phone 	= ( isset( $instance[ 'phone' ] ) ) ? $instance[ 'phone' ] : '';
       		$bio 	= ( isset( $instance[ 'bio' ] ) ) ? $instance[ 'bio' ] : '';
       		?>
       			<p>
       				<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></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 esc_attr( $title ); ?>" />
       			</p>
       			<p>
       				<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e( 'Name:' ); ?></label>
       				<input class="widefat" id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" type="text" value="<?php echo esc_attr( $name ); ?>" />
       			</p>
       			<p>
       				<label for="<?php echo $this->get_field_id( 'email' ); ?>"><?php _e( 'Email:' ); ?></label>
       				<input class="widefat" id="<?php echo $this->get_field_id( 'email' ); ?>" name="<?php echo $this->get_field_name( 'email' ); ?>" type="text" value="<?php echo esc_attr( $email ); ?>" />
       			</p>
       			<p>
       				<label for="<?php echo $this->get_field_id( 'phone' ); ?>"><?php _e( 'Phone:' ); ?></label>
       				<input class="widefat" id="<?php echo $this->get_field_id( 'phone' ); ?>" name="<?php echo $this->get_field_name( 'phone' ); ?>" type="text" value="<?php echo esc_attr( $phone ); ?>" />
       			</p>
       			<p>
       				<label for="<?php echo $this->get_field_id( 'bio' ); ?>"><?php _e( 'Bio:' ); ?></label>
       				<textarea class="widefat" id="<?php echo $this->get_field_id( 'bio' ); ?>" name="<?php echo $this->get_field_name( 'bio' ); ?>"><?php echo esc_attr( $bio ); ?></textarea>
       			</p>
       		<?php
       	}
       	public function update( $new_instance, $old_instance ) {
       		$instance = array();
       		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
       		$instance['name'] = ( ! empty( $new_instance['name'] ) ) ? strip_tags( $new_instance['name'] ) : '';
       		$instance['email'] = ( ! empty( $new_instance['email'] ) ) ? strip_tags( $new_instance['email'] ) : '';
       		$instance['phone'] = ( ! empty( $new_instance['phone'] ) ) ? strip_tags( $new_instance['phone'] ) : '';
       		$instance['bio'] = ( ! empty( $new_instance['bio'] ) ) ? strip_tags( $new_instance['bio'] ) : '';
       		return $instance;
       	}
       }
       function load_my_custom_widget() {
       	register_widget( 'my_custom_widget' );
       }
       add_action( 'widgets_init', 'load_my_custom_widget' );
       ```
   
 *  Thread Starter [Jasnick](https://wordpress.org/support/users/jasnick/)
 * (@jasnick)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588618)
 * Hi again Samuel
    Thank you very much for all your help. It is now displaying 
   all the info I want. Fantastic! One last thing – is there any way to format the
   way the textarea displays? Currently all the info appears as a block of text 
   with no paragraphs. Is there a way for it to display in paragraphs? Thanks
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588631)
 * Hi Nick!
 * > Currently all the info appears as a block of text with no paragraphs. Is there
   > a way for it to display in paragraphs?
 * I don’t really get you for this one. You mean the info typed within textarea 
   does not show as paragraphs in the front end visitor side? or what, really?
 * I am thinking of `nl2br($bio)` within `echo "<p><strong>Bio:</strong> $bio</p
   >";` line but yet you have to explain more on this :v
 * Samuel
 *  Thread Starter [Jasnick](https://wordpress.org/support/users/jasnick/)
 * (@jasnick)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588636)
 * Hi Samuel
 * Sorry if I was not clear. For example, in Widgets, editor types in:
 * Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam mauris ante,
   elementum at, lacinia id, congue sit amet, mi.
 * Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
   turpis egestas. Morbi ipsum ipsum, hendrerit sit amet, varius nec, ornare non,
   lectus.
 * Phasellus ultrices aliquam ipsum. Sed eros. In et est eu pede pharetra porta.
   In faucibus nunc id magna. Vestibulum gravida risus vitae quam.
 * But on the website it looks like this:
 * Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam mauris ante,
   elementum at, lacinia id, congue sit amet, mi.Pellentesque habitant morbi tristique
   senectus et netus et malesuada fames ac turpis egestas. Morbi ipsum ipsum, hendrerit
   sit amet, varius nec, ornare non, lectus. Phasellus ultrices aliquam ipsum. Sed
   eros. In et est eu pede pharetra porta. In faucibus nunc id magna. Vestibulum
   gravida risus vitae quam.
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588638)
 * can you switch bio line to this:
    `echo "<p><strong>Bio:</strong> nl2br($bio)
   </p>"` and let me know how it goes..
 *  Thread Starter [Jasnick](https://wordpress.org/support/users/jasnick/)
 * (@jasnick)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588644)
 * Thanks Samuel
    Nothing changed except n12br appeared in the output on the website.
 * However, there is a worse problem I discovered last night when I tried to go 
   back into the site. After the login page I just got a white page. I disabled 
   all plugins and eventually found it was this plugin that was causing the problem.
   Such a shame as it shows just what I want. The situation is still the same this
   morning.
 *  Thread Starter [Jasnick](https://wordpress.org/support/users/jasnick/)
 * (@jasnick)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588645)
 * Don’t worry Samuel – I found an article about adding auto paragraphs to a widget
   and it works! I also found another example of a widget that doesn’t conflict 
   with my installation. Thank you for all your help – I certainly learned a lot
   from you and do appreciate your time.
 *  anonymized-13749270
 * (@anonymized-13749270)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588650)
 * Hi Nick!
 * Actually I didn’t pay much attention as it should be `echo '<p><strong>Bio:</
   strong>' . nl2br($bio) . '</p>';`
    But now I am glad you have solved your problem.
 * You are very welcome! thanks and good luck with developing the rest of your plugin
   🙂 !!

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Adding 'text' fields to widget’ is closed to new replies.

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 14 replies
 * 2 participants
 * Last reply from: anonymized-13749270
 * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/adding-text-fields-to-widget/#post-6588650)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics