0

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.

0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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