Search form

WP Codex

<?php get_search_form( $echo ); ?>

Display search form using searchform.php Theme file.

Default HTML5 Form

Since WordPress 3.6, If your theme supports HTML5 Markup, which happens if it uses:

add_theme_support( 'html5', array( 'search-form' ) );

WordPress will render its built-in HTML5 search form:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
  <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />

Example of a custom searchform.php:

<form action="/" method="get">
  <label for="search">Search in <?php echo home_url( '/' ); ?></label>
  <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
  <input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" />

For example by only showing posts in the search results. This can be done with the next addition to the form above:

<input type="hidden" value="post" name="post_type" id="post_type" />

Here we submit the value post. The default value is any, meaning, posts, pages and custom post types. With the input above added to the form it will now only search in posts with the post_type post. There are many additions like this. With a var_dump of the object $wp_query you can see all the default values of the search variables. With a var_dump of $wp_query->query you can see the current query.

A last option is to write a custom function (in your functions.php file) and hook that function to the get_search_form action hook.

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

  return $form;

add_filter( 'get_search_form', 'my_search_form' );



Leave a Reply