filters - Adding id and class to the search input in WordPress search form

I want to apply the AJAX feature to the WordPress custom theme for search. And I need to target the input using id and class.

I didn't find any tutorial on adding id to the premade WordPress search form. Remember you, I am talking about the get_search_form() function.

I want to modify its input and want to add class to it. How can I do that whether using add_filter or anything else. Thanks in advance.

I want to apply the AJAX feature to the WordPress custom theme for search. And I need to target the input using id and class.

I didn't find any tutorial on adding id to the premade WordPress search form. Remember you, I am talking about the get_search_form() function.

I want to modify its input and want to add class to it. How can I do that whether using add_filter or anything else. Thanks in advance.

• filters
• search

Share Improve this question edited Dec 2, 2018 at 9:51 Krzysiek Dróżdż 25.6k99 gold badges5353 silver badges7474 bronze badges asked Dec 2, 2018 at 4:36 din personaldin personal 1311 silver badge77 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

You can hook into the get_search_form(). Set the priority high enough to override anything created in a theme. If you do have searchform.php in your theme, it will be used instead. The input text field should be named s and you should always include a label like in the examples below.

WordPress Search Form Function Track

function custom_search_form( $form ) {
  $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
    <div class="custom-search-form"><label class="screen-reader-text" for="s">' . __( 'Search:' ) . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
  </div>
  </form>';

  return $form;
}

add_filter( 'get_search_form', 'custom_search_form', 100 );

Let's take a look at get_search_form code.

function get_search_form( $echo = true ) {

    ...

    $search_form_template = locate_template( 'searchform.php' );
    if ( '' != $search_form_template ) {
        ob_start();
        require( $search_form_template );
        $form = ob_get_clean();
    } else {
        if ( 'html5' == $format ) {
            $form = '<form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
                <label>
                    <span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>
                    <input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search &hellip;', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" />
                </label>
                <input type="submit" class="search-submit" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />
            </form>';
        } else {
            $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . esc_url( home_url( '/' ) ) . '">
                <div>
                    <label class="screen-reader-text" for="s">' . _x( 'Search for:', 'label' ) . '</label>
                    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
                    <input type="submit" id="searchsubmit" value="'. esc_attr_x( 'Search', 'submit button' ) .'" />
                </div>
            </form>';
        }
    }

    ....

    $result = apply_filters( 'get_search_form', $form );

    if ( null === $result )
        $result = $form;

    if ( $echo )
        echo $result;
    else
        return $result;
}

As you can see, there is get_search_form filter called just before returning/printing the form, so you can use it to add classes/ids to the form.

There is one catch though... The code of the form may look in different ways. In the code above you already see 2 versions (html and html5), but the form may also be coded using template file... So it can be a little bit tricky...

But still... Add your filter, check if the class attr exists, and change it, or add it...