Bu kodu nasıl çalıştırırım wordpresste?

<div class="header-search-wrapper">                     <span class="search-main"><i class="fa fa-search"></i></span>                     <div class="search-form-main clearfix">                         <?php get_search_form(); ?>                     </div>                 </div><!-- .header-search-wrapper -->             </div><!-- .teg-container -->         </div><!-- #teg-menu-wrap -->

Bu kodu bu kodun çalıştığı bir siteden aldım. Amacı ise wordpresste mercek butonu olması ona tıklayınca arama kısmı açılması. Bu kodun yeterli olmadığını biliyorum fakat bu kod ile mercek çıktı. şimdi bu kodun aktif olması için başka ne yapmalıyım? Anlatmaya çalıştığım sistemin çalışır hali şurada: www.hastaliktedavisi.net headerdeki kırmızı mercek butonu. tıklayınca arama sayfası açılıyor. bunu bir sitemde çalıştırabilmek istiyorum ama ?

kendi sitenizdeki header.php dosyasında uygun bir yere yerleştirmelisiniz.

Yerleştirdim. mercek çıkıyor problem yok. ama arama sayfası için başka bir işlem gerekli galiba, tıklayınca bi işlevi yok bu merceğin şuan

<div class="header-search-wrapper">
<span class="search-main"><i class="fa fa-search"></i></span><div class="search-form-main clearfix"><form role="search" method="get" class="search-form" action="siteadresi.com/">
<label>
<span class="screen-reader-text">Arama:</span>
<input type="search" class="search-field" placeholder="Ara …" value="" name="s">
</label>
<input type="submit" class="search-submit" value="Ara"></form></div></div>

    .header-search-wrapper {
     float: right;
     position: relative;
    }
    .search-main {
     display: block;
     line-height: 40px;
     padding: 0 14px;
     cursor: pointer;
     color: #fff;
     background: #408c40;
    }
    .header-search-wrapper .search-form-main {
background: #fff none repeat scroll 0 0;
-webkit-box-shadow: 1px 1px 7px rgba(0,0,0,.15);
box-shadow: 1px 1px 7px rgba(0,0,0,.15);
border-top: 2px solid #408c40;
padding: 15px;
position: absolute;
right: 0;
top: 124%;
width: 300px;
z-index: 9999;
opacity: 0;
visibility: hidden;
}
.search-form-main.active-search {
opacity: 1;
visibility: visible;
}
.header-search-wrapper .search-form-main {
border-top-color: #d33;
}
.header-search-wrapper .search-form-main:before {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #408c40;
content: "";
position: absolute;
right: 15px;
top: -10px;
}
.header-search-wrapper .search-form-main:before {
border-bottom-color: #d33;
}
.header-search-wrapper .search-form-main .search-field {
border-radius: 0;
padding: 4px 10px;
width: 75%;
float: left;
}
.header-search-wrapper .search-form-main .search-submit {
border: medium none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
float: left;
padding: 10px 0 10px;
width: 25%;
height: 36px;
background: #d33;
}

$('.header-search-wrapper .search-main').click(function(){
    $('.search-form-main').toggleClass('active-search');
    $('.search-form-main .search-field').focus();
});

Hocam bu kadar çıkarabildim isterseniz deneyin CodePen testinde çalıştı

https://codepen.io/mikropiks/pen/zgWwEO

Bu sadece bir HTML kodu hocam. Bunun zaten asla bir işlevi olamaz.

WordPress kullandığım en son altyapı. Çok bilgi sahibi değilim.

Ya php kodu ile yada bir eklenti ile çalışıyor olabilir. Eklenti kısmından search yazıp aratın. Belki benzer bir şey bulursunuz.

hocam yapıştırmayla olacak ibrşey değil zaten. çünkü temanız farlı. yani html css si kodlanmamış sizin temanızda button nasıl çalışsın yada görünsün.

Aşağıdaki linklerden nasıl yapılacağı ile ilgili bilgi alabilirsiniz.

1. ​Arama Formu Yapımı​​​
2. ​Arama Sayfası Yapımı​​

Yukarıdaki linkleri yapmak istedikleriniz ayrıntılı anlatılmış. Aklınıza takılan birsey olursa sorarsınız.