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 fantastic Genesis child theme to build trust as an author, blogger, freelancer, etc.

Lately, I switched to 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 one of the developers and thought to share the code with you.

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 in 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 class="header-icons">
                <span class="search-box">
                        <a class="search-icon" href="javascript:void(0)">
                                <i class="dashicons dashicons-search"></i>
<?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);


 * 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(".header-icons .search-box .search-icon").click(function(){
  jQuery(".site-header .wrap .head-custom-search").slideToggle();
  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.has( === 0) {
   if (! && search_icon.has( === 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;
header .header-icons .search-box{
header .header-icons a{
header .header-icons .search-box i{
header .header-icons .twitter-icon i{
header .header-icons .fb-icon i{
 display: none;
.genesis-nav-menu  i{
.genesis-nav-menu .custom-search-icon i{
 padding: 0px 25px 0px 10px;
.genesis-nav-menu li a.icon{
 padding: 12px 5px;
.site-header .wrap{
.site-header .wrap .head-custom-search{
 top: 78px;
 right: 20px;
 width: 712px;
 text-align: center;
 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;
 border:1px solid #e1e1e1;
.site-header .wrap .head-custom-search .search-form  input[type="submit"] {
    margin-top: 0px !important;
 padding: 20px 26px 18px;
 border-left: 0px;
.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 Genesis framework.

4 thoughts on “How to Add Search Icon in Genesis Authority Pro Header?”

  1. This is so cool and amazing, it works for me 100% using Genesis Magazine Pro.
    You don’t know how many blogs i have visited and PHP/JS codes i have tried just to get this to work but to no avail BUT yours did it instantly. Keep up the good work.

  2. Thank you Chandan for this fantastic totorial.
    I immediately managed to Add Search Icon in my Genesis Authority Pro Header.
    Only problem: the display on mobile devices where, for the moment, I decided to hide the search icon.
    I hope to find a solution in the future.
    Best Regards

Leave a Comment

Your email address will not be published. Required fields are marked *