Tutorial on How to Make a WordPress Custom Search Page Template

the search.php is the search page template for WordPress, in this search template development we will learn to make a search form and search result displaying page so first, we will make a search form in any position of the theme

The search form code for WordPress search function

<form action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get" class="form-inline search-form">    
<div class="input-group">       
<input type="text" name="s" class="form-control" placeholder="Search....">       
<div class="input-group-addon" id="search"><i class="fa fa-search" aria-hidden="true"></i>
</div>    
</div>
</form>

Here the form action will be the homepage location of the theme and for that using the code <?php echo esc_url( home_url( '/' ) ); ?> and the name of the text type input as “s” and the method of submission of the page must be getting as the URL after submission should show https://your-site-domain.com?s=search+key

Search Form

Now Start to make the archive page step by step

Step 1

make a search.php file inside your WordPress custom theme folder

Step 2

get an HTML template to show the search result loop and copy the HTML code and paste it into your search.php file.

Step 3

Now place the custom theme header, footer, and sidebar in its position using the code <?php get_header(); ?>, <?php get_footer(); ?>, and <?php get_sidebar(); ?>

Step 4

Make the search page title dynamic using the code <?php printf( __( 'Search Results for: %s', 'shape' ), '<span>' . get_search_query() . '</span>' ); ?>

Step 5

In search.php file, WordPress is used to send only the post loop related to the searched keyword inside content or title now write the below code to get the search result loop

<?php if(have_posts()): ?>    
<?php while(have_posts()): ?> 
<?php the_post(); ?> 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
<div class="blog-post"> 
<h2 class="heading">  
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
</h2> 
</div> 
<div> 
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" /> 
</div> 
<div> 
<?php the_excerpt(); ?> 
</div>            
<div class="overlay"> 
<a id="read-more" href="<?php the_permalink(); ?>">Read More</a> 
</div> 
</div> 
<?php endwhile; ?> 
<?php endif; ?>

Step 6

Now reset the wp-query using the code <?php wp_reset_query(); ?>

Step 7

Now here is the full code to make a custom search page template

<?php get_header(); ?>
<div class="container"> 
<div class="row"> 
<div class="col-md-12"> 
<h1><?php printf( __( 'Search Results for: %s', 'shape' ), '<span>' . get_search_query() . '</span>' ); ?></h1> 
</div> 
<div class="col-md-8"> 
<?php if(have_posts()): ?>     
<?php while(have_posts()): ?> 
<?php the_post(); ?> 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
<div class="blog-post"> 
<h2 class="heading">  
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
</h2> 
</div> 
<div> 
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" /> 
</div> 
<div> 
<?php the_excerpt(); ?> 
</div>             
<div class="overlay"> 
<a id="read-more" href="<?php the_permalink(); ?>">Read More</a> 
</div> 
</div> 
<?php endwhile; ?>  
<?php endif; ?>  
</div> 
<div class="col-md-4"> 
<?php get_sidebar(); ?> 
</div> 
</div>
</div>
<?php get_footer(); ?>

now test the search result page and its ready for use to show the searched post in your WordPress theme

Thanks for reading.