making a search form and search page in wordpress theme

Question

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( "https://wordpress.stackexchange.com/" ); ?>">
    <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(); ?>

Related Posts: