English English French French Spanish Spanish German German
Geekflare is supported by our audience. We may earn affiliate commissions from buying links on this site.
Share on:

How to Add Search Icon in Genesis Authority Pro Header?

genesis search
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.

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
  • Semrush is an all-in-one digital marketing solution with more than 50 tools in SEO, social media, and content marketing.
    Try Semrush
  • Intruder is an online vulnerability scanner that finds cyber security weaknesses in your infrastructure, to avoid costly data breaches.
    Try Intruder