1

I am attempting to create some custom widgets.

I have created one, which only needed a different title field. However I am now stuck when trying to create a widget which allows me to have multiple fields. I need the following fields for the widget:

  • Title
  • Introduction text
  • Main text
  • Email address

I want the widget form to allow the user to update the fields above with text. I then want to output the text they have written in my sidebar widget.

I have the following code which is for the previous widget I made (with no extra fields other than title)

class registercv_widget extends WP_Widget {

        function __construct() {
            parent::__construct(
                'registercv_widget',
                __('Register CV Widget', 'registercv_widget_domain'),
                array( 'description' => __( 'Provides a "Register CV" button which launches a pop-up', 'registercv_widget_domain' ), )
            );
        }

        public function widget( $args, $instance ) {
            $title = apply_filters( 'widget_title', $instance['title'] );
            echo $args['before_widget'];
            echo '<div class="widget-wrapper">';
            if ( ! empty( $title ) )
                echo $args['before_title'] . $title . $args['after_title'];

    // This is where you run the code and display the output
            echo __( '<div class="register-button"><span><div class="button white">Send your CV</div></span></div>', 'registercv_widget_domain' );
            echo '</div>';
            echo $args['after_widget'];
        }

    // Widget Backend
        public function form( $instance ) {
            if ( isset( $instance[ 'title' ] ) ) {
                $title = $instance[ 'title' ];
            }
            else {
                $title = __( 'Register as a candidate', 'registercv_widget_domain' );
            }
    // Widget admin form
            ?>
            <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>
        <?php
        }

    // Updating widget replacing old instances with new
        public function update( $new_instance, $old_instance ) {
            $instance = array();
            $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
            return $instance;
        }
    }

    function registercv_load_widget() {
        register_widget( 'registercv_widget' );
    }
    add_action( 'widgets_init', 'registercv_load_widget' );

This works fine but how can I add extra fields to this?

I have attempted copying all instances of $title and making them again but with $text_one but I do not understand how this field is being registered. Can anybody help?

1 Answer 1

1

I assume that you want to add more custom fields in widget back end form, for this you just need to create a new field in form( $instance ); function.

So the code will look like

        // Widget Backend
        public function form( $instance ) {
            if ( isset( $instance[ 'title' ] ) ) {
                $title = $instance[ 'title' ];
            }
            else {
                $title = __( 'Register as a candidate', 'registercv_widget_domain' );
            }

            if ( isset( $instance[ 'name' ] ) ) {
                $name = $instance[ 'name' ];
            }
            else {
                $name = __( 'Enter your name', 'registercv_widget_domain' );
            }

            // Widget admin form
            ?>
            <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>
        <?php
        }

The above code will create a new field in form. Next we will need to save/update the value of this new field in database, follow the code given below:

// Updating widget replacing old instances with new
    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'] ) : '';
        return $instance;
    }

Your Answer

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

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