How to Add Search Icon in Genesis Authority Pro Header?

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.

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.

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

Next, check out the WordPress Genesis Child Theme.