How to Create a Custom Search Widget?

If you are searching to add custom search, you can follow the procedures.

Step 01: We shall focus on the following methods.

    __construct(): In this part, you can create the widget ID, title, and description.

    widget : Here we can define the output generated by the widget.

    form: This part of the code, where we can create the form with widget options for the backend.

    update: In this part we can save widget options in the database.

    Now let’s put all of this together to create a Custom Search widget.

    You can copy and paste the following code in your custom plugin or theme’s functions.php file.

    You can follow the code, given below-

   class Theme_domain_custom_search extends WP_Widget {

        function __construct() {
            $widget_ops = array('description' => esc_html__('Display Custom Search Form ', 'Theme_domain'));
            parent::__construct( false, esc_html__('Custom Search Form', 'Theme_domain'), $widget_ops);
        }
    
        // Creating widget front-end
        public function widget( $args, $instance ) {
            $title = apply_filters( 'widget_title', $instance['title'] );
            
            // before and after widget arguments are defined by themes
            echo $args['before_widget'];
            if ( ! empty( $title ) )
            echo $args['before_title'] . $title . $args['after_title'];

            ?>

            <form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="search-form">
                <div class="form-group">
                    <input type="text" class="search-field" placeholder="<?php esc_attr_e( 'Search...', 'Theme_domain' ); ?>" value="<?php echo get_search_query(); ?>" name="s" required>
                </div>

                <button type="submit" class="search-submit"></button>
            </form>

            <?php
            echo $args['after_widget'];
        }
                
        // Widget Backend 
        function form( $instance ) {
            $defaults = array(
                'title' => 'Search',
            );
            $instance = wp_parse_args((array)$instance, $defaults);
            // 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 $instance['title']; ?>" />
            </p>
        <?php 
        }
        
        // Updating widget replacing old instances with new
        function update( $new_instance, $old_instance ) {
            $instance = $old_instance;
            $instance['title'] = strip_tags($new_instance['title']);
            return $instance;
        }
    } 

    // Register and load the widget
    function Theme_domain_register_custom_search() {
        register_widget( 'Theme_domain_custom_search' );
    }
    add_action( 'widgets_init', 'Theme_domain_register_custom_search' );

Step 02: After adding the code you need to head over to Appearance » Widgets in your dashboard. You will notice the new WP Widget in the list of available widgets. You can now add this widget to your WP Widget.

Now you can visit your website to see it in action.

I hope this article will help you how to learn easily to add a custom Search widget.

And that’s it 🙂

Happy coding 🙂