Search Form with result page
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() ?>
Comments