Geekflare is supported by our audience. We may earn affiliate commissions from buying links on this site.
In WordPress Last updated: September 14, 2023
Share on:
Invicti Web Application Security Scanner – the only solution that delivers automatic verification of vulnerabilities with Proof-Based Scanning™.

Procedure to add toggle search icon in the header (next to navigation menu)

Authority Pro by StudioPress is a fantastic Genesis child theme to build trust as an author, blogger, freelancer, etc.

authority-pro

Lately, I switched to the Authority Pro theme, and I wanted to have the search icon in a header but couldn’t find a straightforward solution on the Internet.

But that doesn’t mean it’s not possible.

I had to take help from my developer and thought to share the code with you. The good news is Authority Pro theme comes with WordPress Dashicons integrated which makes it easy.

As a best practice, take a backup of required files before modifying so you can restore when something goes wrong.

  • Login to your WordPress server (cPanel if you are on shared hosting)
  • Go to WP installation and then wp-content/themes/authority-pro
  • Add the following at end of the  functions.php file.
// Header Search Function
add_filter( 'genesis_header', 'genesis_header_icon', 10, 2 );
function genesis_header_icon(){ ?>
        <div class="custom-search head-custom-search">
                <?php echo sprintf( '%s', __( genesis_search_form( $echo ) ) ); ?>
        </div>
        <div class="header-icons">
                <span class="search-box">
                        <a class="search-icon" href="javascript:void(0)">
                                <i class="dashicons dashicons-search"></i>
                        </a>
                </span>
        </div>
<?php }

Next, add the following in Enqueues scripts and styles section.

wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js', 'jquery', '3.0.0', TRUE);

Ex

/**
 * Enqueues scripts and styles.
 *
 * @since 1.0.0
 */
function authority_enqueue_scripts_styles() {
wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js', 'jquery', '3.0.0', TRUE);
  • Save the file

Let’s add the toggle jquery functions

  • Go to js folder and create a new file called custom.js  with the following codes
// Header Search Toggle
//---------------------------------------------------------------
jQuery(document).ready(function(){
 jQuery(".header-icons .search-box .search-icon").click(function(){
  jQuery(".site-header .wrap .head-custom-search").slideToggle();
  //alert('thtyh');
  jQuery(".header-icons .search-box .search-icon i").toggleClass("dashicons-search dashicons-no-alt");
 }); 
 jQuery(document).mouseup(function(e) {
  var container   = jQuery(".site-header .wrap .head-custom-search");
  var search_icon = jQuery(".header-icons .search-box .search-icon");  
  // if the target of the click isn't the container nor a descendant of the container
  if (!container.is(e.target) && container.has(e.target).length === 0) {
   if (!search_icon.is(e.target) && search_icon.has(e.target).length === 0) {   
   jQuery('.site-header .wrap .head-custom-search').slideUp();
   jQuery('.header-icons .search-box .search-icon i').removeClass("dashicons-no-alt");
   jQuery('.header-icons .search-box .search-icon i').addClass("dashicons-search");
   }
  }
 });
});

and, finally, time to beautify the search toggle box.

  • Add the following in a style.css file
header .header-icons{
 width: 112px;
 float: right;
 text-align: right;
 padding: 15px 0px 8px;
 position:relative;
}
header .header-icons .search-box{
 position:relative;
}
header .header-icons a{
 margin-left:10px;
 text-decoration:none;
}
header .header-icons .search-box i{
 color:#333;
}
header .header-icons .twitter-icon i{
 color:#3FA9F5;
}
header .header-icons .fb-icon i{
 color:#3A559F;
 display: none;
}
.genesis-nav-menu  i{
 vertical-align:middle;
}
.genesis-nav-menu .custom-search-icon i{
 vertical-align:middle;
 padding: 0px 25px 0px 10px;
 cursor:pointer;
}
.genesis-nav-menu li a.icon{
 padding: 12px 5px;
}
.site-header .wrap{
 position:relative;
}
.site-header .wrap .head-custom-search{
 position:absolute;
 top: 78px;
 right: 20px;
 width: 712px;
 text-align: center;
 background:#fff;
 display:none;
 z-index: 9999;
}
.site-header .wrap .head-custom-search::before{
    border-color: transparent transparent #ff5722;
    border-style: solid;
    border-width: 0.5em;
    content: "";
    display: block;
    position: absolute;
    right: 50px;
    top: -20px;
    z-index: 10;
}
.site-header .wrap .head-custom-search .search-form {
    margin-bottom: 0px;
    width: 100%;
 padding: 20px 18px;
 border-top: 3px solid #ff5722;
}
.site-header .wrap .head-custom-search .search-form  input[type='search']{
 width: 562px;
 height:58px;
 border:1px solid #e1e1e1;
 border-right:0px;
}
.site-header .wrap .head-custom-search .search-form  input[type="submit"] {
    margin-top: 0px !important;
 padding: 20px 26px 18px;
 border-left: 0px;
 background:#ff5722;
 color:#fff;
}
.site-header .wrap .head-custom-search .search-form input:focus[type="submit"],
.site-header .wrap .head-custom-search .search-form input:hover[type="submit"]{
  transform: translate3d(0,0,0);
}
  • Save the file

That’s all.

Refresh your page, and you should see the search icon and toggle in action.

genesis-search-icon

I hope this helps you to add the search icon in the Genesis framework.

Next, check out the WordPress Genesis Child Theme.

  • Chandan Kumar
    Author
    As the founder of Geekflare, I’ve helped millions to excel in the digital realm. Passionate about technology, I’m on a mission to explore the world and amplify growth for professionals and businesses alike.
Thanks to our Sponsors
More great readings on WordPress
Power Your Business
Some of the tools and services to help your business grow.
  • Invicti uses the Proof-Based Scanning™ to automatically verify the identified vulnerabilities and generate actionable results within just hours.
    Try Invicti
  • Web scraping, residential proxy, proxy manager, web unlocker, search engine crawler, and all you need to collect web data.
    Try Brightdata
  • Monday.com is an all-in-one work OS to help you manage projects, tasks, work, sales, CRM, operations, workflows, and more.
    Try Monday
  • Intruder is an online vulnerability scanner that finds cyber security weaknesses in your infrastructure, to avoid costly data breaches.
    Try Intruder