How to create wordpress custom post search result page template

Hello friends, welcome to my another blog post how to create WordPress custom post search result page template. By default WordPress has a default search form where you can search all site content. But if you want to search only inside a Custom Post then you have to modify the search form. You must add this code to search only inside your custom post . Now come to result page. By default wordpress find search.php to show the search result. If you do not have search.php WordPress then call index.php to show the result. But if you want a custom page template to show the search result then what to do. So today I will guide you step by step how to achieve that.

Step 1:Create a custom post supported search form

Your search form will look like this

<form class="search" class="custom-product-search" action="<?php echo home_url( '/' ); ?>">				  
				<input type="search" name="s" placeholder="Search Product">				  
				<input type="submit" value="Search">				  
				<input type="hidden" name="post_type" value="product">				
			</form>

Step 2:Add your custom search result page using theme’s functions.php

Now put the below code into your theme functions.php to add your custom search result page:



/* Create custom template for product search */

function create_poduct_search_template($template) {    
	global $wp_query;   
       /* Get the custom post type name from url */
	$post_type = get_query_var('post_type');   
        /* Match the custom post type name and load your custom search result page template */
	if( $wp_query->is_search && $post_type == 'product' ) {
		return locate_template('search-product.php'); /* search-product.php is our custom result show template name */
	}   
	return $template;   
}
add_filter('template_include', 'create_poduct_search_template');

Step 3:Create custom post search result page

Now create search-product.php page inside your theme folder and put the below code into your search-product.php page or modify the code to adjust with your theme design. Just normal search result show code:

<?php
/**
 * The template for displaying search results pages for the "product" custom post type.
 *
 * @package healthz
 */
get_header(); ?>
<body>
  	<div class="header-back-details">

        <div class="bg" style="background-image:url(http://healthpicker.com/wp-content/uploads/2015/11/bannar-bg-blog2.jpg)">

		<?php get_template_part('header','nav'); ?>

            <div class="inner-head">

            	<div class="container">

                	<h1><?php printf( __( 'Search Results for: %s', 'healthz' ), get_search_query() ); ?></h1>

					<ul class="bedcrumb">

                    	<li><a href="<?php echo home_url(); ?>">home</a></li>

                        <li><?php printf( __( '%s', 'healthz' ), get_search_query() ); ?></li>

                    </ul>

                </div>

            </div>    

        </div>

    </div>  

	

	<div class="top-details-back">
    	<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="row">
						<?php if ( have_posts() ) : ?>
						<?php while (have_posts()) : the_post(); ?>
						<div class="col-md-4 col-sm-6">
							<div class="portion">
								<a href="<?php the_permalink(); ?>"><img src="<?php echo get_post_meta($post->ID, 'product_custom_image', true); ?>" alt="<?php the_title(); ?>" />
									<div class="back-text">
										<h2><?php the_title(); ?></h2>
										<div class="clear"></div>
										<p><?php echo substr(get_the_excerpt(),0,70); ?> ...</p>
										<a href="<?php the_permalink(); ?>"><div class="button-deal">get more</div></a>
									</div>
								</a>
							</div>
						</div>    
						<?php endwhile; // End the loop. Whew.  ?>
						<?php
						/* Put your pagination code here */
						if ( function_exists('wp_bootstrap_pagination') ){
							wp_bootstrap_pagination();
						}						
						?>
						<?php else : ?>

						<?php get_template_part( 'content', 'none' ); /* If no custom post found then this template will call */ ?>

						<?php endif; ?>
					</div>	
					
						
				</div>
			</div>
        </div>
    </div>

<?php
get_footer();
?>

Follow the above instruction carefully. This will done the job for you. Now you know how to create WordPress custom post search result page template. If you have any question or suggestion please comment below. If you like my post then please share it with your friends. Thank you.

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •