Link to search page without search parameter

Question

I'm a bit stuck with my actual project. Actually I wanted to link a search icon to the search page (where there's a form & the results).

Actually I tried to link like this: /project/?s= but it redirects to the index page when s= empty - when I assign a parameter like s=ipsum it directs to the search page with its results.

Is there a way to link to the search page with a clean URL (without doing a search)?

Answer 1

Create a file search.php inside your theme-folder. In this file you can design the search page and its functionality.

Typically search page looks like this,

<?php
/**
 * The template for displaying search results pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
 *
 * @package Torba_Market
 */

get_header(); ?>
    <div class="container">

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

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

            <header class="page-header">
                <h1 class="page-title"><?php printf( esc_html__( 'Search Results for: %s', 'torba' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
            </header>
            <?php
            /* 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', 'search' );

            endwhile;

            the_posts_navigation();

        else :

            get_template_part( 'components/post/content', 'none' );

        endif; ?>

        </main>
    </section>
    </div>
<?php

get_footer();

?>

Here you can call different header and footer too.

Answer 2

How about make a new template for your Search Page and put Search Form inside of it. Like this:

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
                <label>
                    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'yourTheme' ); ?></span>
                    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'yourTheme' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
                </label>
                <button type="submit" class="search-submit"><span class="screen-reader-text"><?php echo _x( 'Search', 'submit button', 'yourTheme' ); ?></span></button>
            </form>
        </div>

        <div class="col-md-6 col-sm-12">
            <?php
                while ( have_posts() ) : the_post();
                    get_template_part( 'template-parts/content', 'page' );
                    if ( comments_open() || get_comments_number() ) {
                        comments_template();
                    }
                endwhile;
            ?>
        </div>
    </div>
</div>

Answer 3

When WordPress makes a search it uses the search.php template and if it has not it then it uses the index.php template. You can see the template hierarchy here

You should include a search form in the search.php template only when you have not a word searched.

Answer 4

This is really old but here is a way to accomplish this. What you want to do is on your result page wrap all your content within an if statement checking the length of the search term and show the results etc if the length of the term is greater or equal to 2 then you can link to a blank search term

if (strlen(get_search_query()) >= 2) {
      // search results here
    }
   ?>