Adding 'text' fields to widget

Can you provide the full code within class you used for the widget ?

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') );
    }

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.

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: https://www xxx
Description: A simple plugin that adds a simple widget
Version: 1.0
Author: WPExplorer
Author URI: https://www.xxx
License: GPL2
*/`
Thanks again!

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..

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

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' );

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

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

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.

can you switch bio line to this:
echo "<p><strong>Bio:</strong> nl2br($bio)</p>"
and let me know how it goes..

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.

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.

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 ?? !!