Today we will learn how to add search bar on wordpress custom theme because when we create custom theme we need search bar to search the post so that we can find the post we want.
So I have explained here simply how you can add custom search bar in WordPress custom theme by yourself so follow my below steps.
Table of Contents
Create a searchform.php File
searchform.php
First you create a searchform.php File and paste the below code into it.
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
<div>
<label class="screen-reader-text" for="s"></label>
<input value="" name="s" id="s" type="text" placeholder="<?php the_search_query(); ?>">
<input id="searchsubmit" value="Search" type="submit">
</div>
</form>
This is so that you can style your search form
If you don’t want to create a searchform.php file, you can use the get_search_form() function, but you will still see the search form.
Add get_search_form() to index.php file
Default Output of get_search_form() function
<?php get_search_form(); ?>
or
<?php include_once'searchform.php'; ?>
You can also use the PHP include() function there to see the form you created.
<?php get_header(); ?>
<section class="g-main-section">
<div class="container">
<h1>Blog</h1>
</div>
</section>
<!--main title section -->
<!-- main container -->
<div class="container">
<!-- main row -->
<div class="row">
<div class="col-12 pt-5">
<?php get_search_form(); ?>
<?php //include_once'searchform.php'; ?>
</div>
<!-- blog section -->
<div class="col-lg-8 mt-5 mb-5">
<div class="row">
<?php
if( have_posts()) {
while ( have_posts()){
the_post();
?>
<div class="col-lg-6 g-blog mb-5">
<a href="<?php the_permalink(); ?>">
<div>
<h2><?php the_title(); ?></h2>
<p>
<?php the_excerpt(); ?> </p>
</p>
</div>
</a>
</div>
<?php }
}else{
echo 'sorry not found';
}
?>
</div>
</div>
<!-- sidebar -->
<div class="col-lg-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
output:-

Create a search.php File
search.php
Search queries in the form will now be displayed in the direct search page, keeping the design of the blog page and search page consistent as much as possible.
Here we have the_search_query(); showing the user’s search query using , to make our search page more attractive
<?php get_header(); ?>
<section class="g-main-section">
<div class="container">
<h1>Search results for query: "<?php the_search_query(); ?>"</h1>
</div>
</section>
<!-- main container -->
<div class="container">
<!-- main row -->
<div class="row">
<div class="col-12 pt-5">
<?php get_search_form(); ?>
</div>
<!-- blog section -->
<div class="col-lg-8 mt-5 mb-5">
<div class="row">
<?php
if( have_posts()) {
while ( have_posts()){
the_post();
?>
<div class="col-lg-6 g-blog mb-5">
<a href="<?php the_permalink(); ?>">
<div>
<h2><?php the_title(); ?></h2>
<p>
<?php the_excerpt(); ?> </p>
</p>
</div>
</a>
</div>
<?php }
}else{
echo 'sorry not found';
}
?>
</div>
</div>
<!-- sidebar -->
<div class="col-lg-4">
<?php get_sidebar(); ?>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>
Output:-

Here comes the custom search bar of your custom theme
How to Custom Post Types in WordPress Search Results
open your functions.php and add this function
/**
* This function modifies the main WordPress query to include an array of
* post types instead of the default 'post' post type.
*
* @param object $query The main WordPress query.
*/
function tg_include_custom_post_types_in_search_results( $query ) {
if ( $query->is_main_query() && $query->is_search() && ! is_admin() ) {
$query->set( 'post_type', array( 'post' , 'movies') );
}
}
add_action( 'pre_get_posts', 'tg_include_custom_post_types_in_search_results' );
By adding this function, everything that was searched for by default will no longer be searched, it will have to pass its string in an array to search.
How to Add a Search Bar to a Custom Post Type
Add the slug of your custom post type by adding the functions mentioned above so that your custom post type will also start searching.