Search Form with result page

PHOTO EMBED

Fri Aug 18 2023 09:57:59 GMT+0000 (Coordinated Universal Time)

Saved by @gshailesh27

//step 1 create searchform.php paste bellow code

     <form class="searchForm" role="search" method="get" action="<?php echo home_url('/'); ?>">
                  <div class="input-group h-100">
                   
                    <input type="text" class="form-control mr-3 rounded-0" placeholder="Type a keyword" name="s" value="<?php the_search_query(); ?>">
                    <div class="input-group-append">
                      <button class="searchSubmit btn rounded-circle" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path></svg></button>
                    </div>
                  </div>
     </form>



//step 2 call search form in header by
<?php get_search_form(); ?>
  
  
//step 3 create search result page called search.php and paste bellow code

<?php
/*
Template Name: Search Page
*/
get_header();

?>
<main>
        <section>
            <div class="container my-4 my-md-5">
                <div class="row justify-content-center">
                    <div class="col-lg-10 mt-5">
                    <div  class="animateThis slideTop mt-5">
                        <h3 class="mb-4">Search Results</h3>
                        <div class="seminar mb-5">
                       
 <?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 
		?>
                         <a href="<?php the_permalink();?>">  
                            <div class=" mb-2" style="background: linear-gradient(0deg, #F4F4F4, #F4F4F4), #F4F4F4;
    border-left: 10px solid var(--orange);
    padding: 20px;
    font-style: italic;
    font-weight: 700;
    font-size: 1.2rem;">
                            <p> <?php the_title();?> </p>
   </div></a>
                            <?php
                             
	} // end while
} // end if
?>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </section> 
    </main>
 <?php get_footer() ?>  
content_copyCOPY