Create a Custom WordPress Search Results Page

A WordPress template is a great way to showcase your work in either a Blog, portfolio, or a list format. Creating a custom WordPress search results page may not be on top of your to-do list for your template but it should be. I’ll show you how to create a simple Search Results page with hooks that are already being used in your existing template.

For my own personal portfolio website template, I created a custom Search Results page that display my Portfolio Items as they would appear on the Portfolio Page. I added a Search Box at the top of my Portfolio Page that drops the users onto the custom WordPress search results page. Your own layout can be whatever you’d like.

The main things that you’ll need are:

Access to your Template files
Access to your search.php file
Access to your ‘single item’ display template file, such as single.php
- This template file controls how your single item is going to look on your Search Results page

Intro

What we’re going to do is create a rule for The Loop to take your search query find your search data. Then we’re going to take a pre-defined single item template and display the search data. This single item template can be the default ‘single.php’ file or your own.

The top of the Search Results page will display information for the visitor about their search results. Such as the total search result count, their search term, and a search box to allow them to search again.

Open your ‘search.php’ file and lets begin coding. Add the minimum markup needed for a page as a placeholder.

<?php get_header(); ?>
 
 <section id="primary" class="content-area">
 <div id="content" class="site-content" role="main">
       <!-- This is where your Search results will go -->
 </div><!-- #content .site-content -->
 </section><!-- #primary .content-area -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Create Your Page Header

This area will give your user information on whats going on in the Search Results Page. The information will include information about the search query, the total search count, and an additional search box.

<?php get_header(); ?>
 
 <section id="primary" class="content-area">
 <div id="content" class="site-content" role="main">

 <header class=" page-header">
 <h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'shape' ), '<span>' . get_search_query() . '</span>' ); ?></h1> 
 </header><!-- .page-header -->
 
 <div id='mw_search_results' class="">
 <div class='col-xs-3'>
 <h3> Total Results: <?php echo $total_results ?> </h3>
 </div>
 <div class="">
 <form method="get" id="mw_searchform_results" action="<?php bloginfo('url'); ?>/">
 <div id="mw_searchform_wrapper">
 <input id="mw_searchform_text" type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
 <input id="mw_searchform_submit" type="submit" id="searchsubmit" value="Search" />
 </div>
 </form> 
 </div>
 </div>
 </div><!-- #content .site-content -->
 </section><!-- #primary .content-area -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

This is going to be wrapped within The Loop, but lets get this piece of the page set before we attempt to get your query results.

Create Your “No Results” Section

Every once in a while you’re going to not find anything with your search. We need to have a way to either try again, or direct your visitors somewhere else.

<h2><?php _e( 'Sorry, no posts matched your criteria. Please try a different search.' ); ?></h2>
 
 <form method="get" id="mw_searchform" action="<?php bloginfo('url'); ?>/">
 <div id="mw_searchform_wrapper">
 <input id="mw_searchform_text" type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
 <input id="mw_searchform_submit" type="submit" id="searchsubmit" value="Search" />
 </div>
 </form>

Get Information About the Query

The page data is what we’re after, specifically the Query value that WordPress is going to be using. Pop this onto the page at the top of the site-content class to gather information that we’ll need to use about the query.

<?php
 global $query_string;

 $query_args = explode("&", $query_string);
 $search_query = array('category_name=portfolio-item');

 if( strlen($query_string) > 0 ) {
 foreach($query_args as $key => $string) {
 $query_split = explode("=", $string);
 $search_query[$query_split[0]] = urldecode($query_split[1]); 
 } // foreach
 } //if

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

What this is doing is looking a the URL of the current page and extracting the query value. Then we are assigning that value to the WP_Query WordPress function. I’m also grabbing the total number of results and storing that into a variable to use later.

Use The Loop to Find Results

We’re now ready to let The Loop find the information that you’re trying to find. Combine what you’ve already created with The Loop to display information about your search results.

 <?php if ( $search->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 -->
 
 <div id='mw_search_results' class="">
 <div class='col-xs-3'>
 <h3> Total Results: <?php echo $total_results ?> </h3>
 </div>
 <div class="">
 <form method="get" id="mw_searchform_results" action="<?php bloginfo('url'); ?>/">
 <div id="mw_searchform_wrapper">
 <input id="mw_searchform_text" type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
 <input id="mw_searchform_submit" type="submit" id="searchsubmit" value="Search" />
 </div>
 </form> 
 </div>
 </div>
 <!-- the loop -->
 <?php while ( $search->have_posts() ) : $search->the_post(); ?> 
 <?php get_template_part( 'portfolio', 'item' ); ?>
 <?php endwhile; ?>
 <!-- end of the loop --> 
 
 
 <?php else : ?>
 <h2><?php _e( 'Sorry, no posts matched your criteria. Please try a different search.' ); ?></h2>
 
 <form method="get" id="mw_searchform" action="<?php bloginfo('url'); ?>/">
 <div id="mw_searchform_wrapper">
 <input id="mw_searchform_text" type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
 <input id="mw_searchform_submit" type="submit" id="searchsubmit" value="Search" />
 </div>
 </form>
 <?php endif; ?>

What we did here was incorporated the Page Header and the “No Results” section into the WordPress Loop. If Results are found, I want to display the Page Header section while repeating the individual items. I have a specific Item Template that I wanted to use to display my items on the page called “portfolio-item.php“. This template file is what is used over and over again when displaying the individual items in The Loop.

WordPress knows which file to use when we added this line

<?php get_template_part( 'portfolio', 'item' ); ?>

You should create a page that will display the item information and will be repeated. If you’d like to use the default ‘single.php‘ file, jut replace the inner part of the line above to say so.

If we don’t find anything, then just display a message and another Search box.

The Full Source

Here is the Style and the Functionality that I used to create my own Search Result template.

Style

/*******************/
/* Item Search */
/*******************/

#mw_searchform
{ 
 padding-left: 10px;
 margin-bottom: 50px;
}

#mw_searchform_wrapper
{
 text-align:center;
}

#mw_searchform_text
{ 
 height: 40px;
 font-size: 1.8em;
 width: 70%;
}

#mw_searchform_submit
{
 height: 48px;
 width: 100px;
 font-size: 1.5em;
}

#mw_search_results 
{
 margin-bottom:40px;
 border-bottom: 1px solid #eee;
}

#mw_searchform_results #mw_searchform_wrapper
{
 text-align:right;
}

#mw_searchform_results #mw_searchform_text
{
 width:auto;
}

Function

<?php get_header(); ?>
 
 <section id="primary" class="content-area">
 <div id="content" class="site-content" role="main">
 <?php
 global $query_string;

 $query_args = explode("&", $query_string);
 $search_query = array('category_name=portfolio-item');

 if( strlen($query_string) > 0 ) {
 foreach($query_args as $key => $string) {
 $query_split = explode("=", $string);
 $search_query[$query_split[0]] = urldecode($query_split[1]); 
 } // foreach
 } //if

 $search = new WP_Query($search_query);
 ?> 
 <?php global $wp_query; $total_results = $wp_query->found_posts;?>
 
 <?php if ( $search->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 -->
 
 <div id='mw_search_results' class="">
 <div class='col-xs-3'>
 <h3> Total Results: <?php echo $total_results ?> </h3>
 </div>
 <div class="">
 <form method="get" id="mw_searchform_results" action="<?php bloginfo('url'); ?>/">
 <div id="mw_searchform_wrapper">
 <input id="mw_searchform_text" type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
 <input id="mw_searchform_submit" type="submit" id="searchsubmit" value="Search" />
 </div>
 </form> 
 </div>
 </div>
 <!-- the loop -->
 <?php while ( $search->have_posts() ) : $search->the_post(); ?> 
 <?php get_template_part( 'portfolio', 'item' ); ?>
 <?php endwhile; ?>
 <!-- end of the loop --> 
 
 
 <?php else : ?>
 <h2><?php _e( 'Sorry, no posts matched your criteria. Please try a different search.' ); ?></h2>
 
 <form method="get" id="mw_searchform" action="<?php bloginfo('url'); ?>/">
 <div id="mw_searchform_wrapper">
 <input id="mw_searchform_text" type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
 <input id="mw_searchform_submit" type="submit" id="searchsubmit" value="Search" />
 </div>
 </form>
 <?php endif; ?>
 
 </div><!-- #content .site-content -->
 </section><!-- #primary .content-area -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Marion Owen

SharePoint and Office 365

Create a Custom WordPress Search Results Page

Intro

Create Your Page Header

Create Your “No Results” Section

Get Information About the Query

Use The Loop to Find Results

The Full Source

Style

Function

Reference

Related

Leave a ReplyCancel reply

Intro

Create Your Page Header

Create Your “No Results” Section

Get Information About the Query

Use The Loop to Find Results

The Full Source

Style

Function

Reference

Share this:

Related

Leave a ReplyCancel reply