//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() ?>