0

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.

  • 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 Jan 2 '18 at 4:27
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(); ?>

| improve this answer | |

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.