Genesis Search Pop Up

Here’s how to make the Genesis child theme search into a pop up instead of embedding on your page.  Backup your child theme functions.php file – I usually just open Appearance->Editor->functions.php then copy and paste the entire functions.php file into Notepad, or I ftp into the site and download it.

1. Create an icon, or add text for your search action.  The search icon below is just a graphic in a header widget.
2. Enable WordPress to allow shortcodes in widgets by adding the below to your child theme’s function.php:

   // Enable shortcodes in widgets
   add_filter( 'widget_text', 'shortcode_unautop' );
   add_filter('widget_text', 'do_shortcode');
   add_action( 'init', 'gw_register_shortcode' );
   
   

3. Create the Genesis Search shortcode

   function gw_register_shortcode() {
    add_shortcode( '404-search', 'gw_search_shortcode' );
   }
   
   /**
   * Search Shortcode Excerpt
   */
   function gw_search_shortcode() {
    return '<div class="404-search">' . get_search_form( false ) . '</div>';
   }

4. Edit your child theme CSS and add:

   .search-form {
   	position: relative;
   }
   
   .search-form > input {
       padding-left: 50px;
       padding-top: 0px;
       padding-bottom: 0px;
   }
   
   .search-form input[type="submit"] {
       background: none !important;
       position: absolute;
      }
   

5. To enable the popup function, install the Easy FancyBox plugin which is a lightweight plugin that includes all the jquery you need. At some point, I hope to update this post with the jquery to add directly to your site but this should work fine for now. Once installed, add the following code surrounding your search icon shown in #1 above:

   <a class="fancybox" href="#search-pop"><img src="url to image icon" /></a>
   
   <div class="fancybox-hidden" style="display: none;">
   
   <div id="search-pop">[404-search]</div>
   
   </div>

…When you click on the search icon, here is what it looks like:

Note – if you do not have dashicons enabled, you will need to add the following to your functions.php:

//* Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'gw_enqueue_dashicons' );
function gw_enqueue_dashicons() { 
 wp_enqueue_style( 'dashicons' ); 
}
add_filter( 'genesis_search_button_text', 'gw_search_button_dashicon' );
function gw_search_button_dashicon( $text ) { 
return esc_attr( '' ); 
}

and use the below for you CSS instead:

.search-form {
	position: relative;
}

.search-form > input {
    padding-left: 50px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.search-form input[type="submit"] {
    background: none !important;
    border: none;
    clip: inherit;
    color: #4a545a;
    display: inline-block;
    font: 28px/1 'dashicons';
    height: 38px;
    padding: 0 10px 0px 12px;
    position: absolute;
    left: 2px;
    top: -10px;
    vertical-align: top;
    width: 38px;
}