making a search form and search page in wordpress theme

How can I make a search form in wordpress theme and link it to search.php page that will display the result in that page? I have a search form that looks like this:

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
                                    <div class="input-group search-block">
                                        <span class="screen-reader-text">Search for:</span>
                                        <input type="search" class="search-field form-control" placeholder="<?php esc_attr_e( 'Search &hellip;', 'shape' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:" />
                                        <div class="input-group-btn">
                                            <input type="submit" class="search-submit btn btn-default" value="<?php esc_attr_e( 'Search', 'shape' ); ?>" />
                                        </div>
                                    </div>
                                </form>

and search.php that looks like this

<?php
/**
 * The template for displaying Search Results pages.
 *
 * @package Shape
 * @since Shape 1.0
 */

get_header(); ?>

        <section id="primary" class="content-area">
            <div id="content" class="site-content" role="main">

            <?php if ( have_posts() ) : ?>

                <header class="page-header">
                    <h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'shape' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
                </header><!-- .page-header -->
                <?php

                    global $query_string;

                    $search_query = wp_parse_str( $query_string );
                    $search = new WP_Query( $search_query );
                    global $wp_query;
                    $total_results = $wp_query->found_posts;
                ?>
            <?php endif; ?>

            </div><!-- #content .site-content -->
        </section><!-- #primary .content-area -->

<?php get_footer(); ?>

problem is It's not displaying anything except the typed characters.

How can I make a search form in wordpress theme and link it to search.php page that will display the result in that page? I have a search form that looks like this:

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
                                    <div class="input-group search-block">
                                        <span class="screen-reader-text">Search for:</span>
                                        <input type="search" class="search-field form-control" placeholder="<?php esc_attr_e( 'Search &hellip;', 'shape' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:" />
                                        <div class="input-group-btn">
                                            <input type="submit" class="search-submit btn btn-default" value="<?php esc_attr_e( 'Search', 'shape' ); ?>" />
                                        </div>
                                    </div>
                                </form>

and search.php that looks like this

<?php
/**
 * The template for displaying Search Results pages.
 *
 * @package Shape
 * @since Shape 1.0
 */

get_header(); ?>

        <section id="primary" class="content-area">
            <div id="content" class="site-content" role="main">

            <?php if ( have_posts() ) : ?>

                <header class="page-header">
                    <h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'shape' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
                </header><!-- .page-header -->
                <?php

                    global $query_string;

                    $search_query = wp_parse_str( $query_string );
                    $search = new WP_Query( $search_query );
                    global $wp_query;
                    $total_results = $wp_query->found_posts;
                ?>
            <?php endif; ?>

            </div><!-- #content .site-content -->
        </section><!-- #primary .content-area -->

<?php get_footer(); ?>

problem is It's not displaying anything except the typed characters.

• search

Share Improve this question asked Jan 2, 2018 at 4:14 maverickmaverick 40744 silver badges1515 bronze badges 1

• Why are you reinventing the wheel? The search.php can work with a simple WordPress Loop. Example here. And there's a searchform.php there too for your reference. – Mayeenul Islam Commented Jan 2, 2018 at 4:27

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Default HTML5 Form . Add theme support

function wpdocs_after_setup_theme() {
    add_theme_support( 'html5', array( 'search-form' ) );
}
add_action( 'after_setup_theme', 'wpdocs_after_setup_theme' );

WordPress will render its built-in HTML5 search form:

<form role="search" method="get" class="search-form" action="<?php echo 
home_url( '/' ); ?>">
    <label>
        <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' ) ?>" />
    </label>
    <input type="submit" class="search-submit"
        value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

insert below code in search.php

<div class="wrap">

<header class="page-header">
    <?php if ( have_posts() ) : ?>
        <h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'twentyseventeen' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
    <?php else : ?>
        <h1 class="page-title"><?php _e( 'Nothing Found', 'twentyseventeen' ); ?></h1>
    <?php endif; ?>
</header><!-- .page-header -->

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

    <?php
    if ( have_posts() ) :
        /* Start the Loop */
        while ( have_posts() ) : the_post();
            /**
             * Run the loop for the search to output the results.
             * If you want to overload this in a child theme then include a file
             * called content-search.php and that will be used instead.
             */
            get_template_part( 'components/post/content', 'excerpt' );
        endwhile; // End of the loop.
        the_posts_pagination( array(
            'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'previous' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
            'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'next' ) ),
            'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
        ) );
    else : ?>

        <p><?php _e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'twentyseventeen' ); ?></p>
        <?php
            get_search_form();
    endif;
    ?>

    </main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>