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.
2 Answers
Reset to default 3You 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 …', '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...