In this tutorial I will show you how to add a full width search form on top of the header using the Genesis Framework. I will be using a modified version of the Genesis Sample theme. The theme can be found here. This tutorial is designed for the modified version of the Genesis Sample Theme. To get this code to work on other themes, some modifications will be required. With that out of the way, let’s continue with this tutorial.
At the end of this tutorial, you will have a search form that looks like this;

I will be using Font Awesome for the x and magnifying glass in this tutorial. In order for this tutorial to work, you have to install Font Awesome. The easiest way to to it is to install a plugin called Better Font Awesome you can find the plugin here.
Now that we have Font Awesome installed, let’s get started!!
Step 1
The first thing that we need to do is to register a widget area for our Search Form. To do that just add this code to the functions.php
file
// Search Form // Register Search widget area function wpb_register_search() { genesis_register_sidebar( array( 'id' => 'search', 'name' => __( 'Search', 'genesis sample' ), 'description' => __( 'This is the Search Widget area', 'genesis sample' ), 'before_widget' => '<div class="wrap search">', 'after_widget' => '</div>', ) ); } add_action( 'widgets_init', 'wpb_register_search' );
Step 2
The next thing that we need to do is to add some code so that our form displays on our web page. Go ahead and add the following code to the functions.php
file
//Display the Search Area function wpb_display_search() { genesis_widget_area ( 'search', array( 'before' => '<div id="search-form-container">', 'after' => '</div><button type="submit" class="icon-search"><i class="mglass fa fa-search"></i></button>',)); } add_action( 'genesis_header','wpb_display_search',9 );
Step 3
We will be using some jQuery to make our search form appear and disappear. So we need to enqueue a JavaScript file. We will create the Javascript file shortly. We will also be modifying the default placeholder in our search form. To do this, go ahead and add the following code to the functions.php
file
//* Enqueue scripts and styles add_action( 'wp_enqueue_scripts', 'search_bar_script' ); function search_bar_script() { wp_enqueue_script( 'search_bar', get_bloginfo( 'stylesheet_directory' ) . '/js/search-bar.js', array( 'jquery' ), '1.0.0' ); } //* Customize search form input box text add_filter( 'genesis_search_text', 'sp_search_text' ); function sp_search_text( $text ) { return esc_attr( 'START TYPING TO SEARCH...') ; }
Step 4
That’s it for the functions.php
file. The next thing that we need to do is create a file called search-bar.js
in our js
folder.
Place the following code inside the search-bar.js
file
jQuery(document).ready(function( $ ) { $(".mglass").click(function() { $("#search-form-container").toggle( ); $(".search-form-label:first").focus(); $(".fa-search").toggleClass("fa-times"); }); });
Step 5
Now we need to add some styling to our web page. Go ahead and add the following code to the style.css
file
/*****************************************************************************************/ /* Search Form */ .search .search-form input[type="submit"] { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; padding: 0; position: absolute; width: 1px; } #search-form-container { background-color: #fff; position: absolute; width: 100%; left: 0; display: none; } #search-form-container input { border: none; } .site-header .search-form { width: 100%; height: 100%; } button.icon-search { position: relative; float: right; margin-top: 15px; background: transparent; color: #333; outline: none; } .fa-search, .fa-times { font-size: 25px!important; line-height: 1; } .fa-times { padding-right: 4px; } .fa-search:hover, .fa-times:hover { color: #999; } input:focus::placeholder { color: #999; }
Step 6
The final step is to place a search widget in the Search Widget Area.
That’s it. You should now have a working full width search bar.
Let me know how things worked out for you.
Great!!!
This is just what I need for my custom child theme, thank you for sharing this wonderful code.
But, the problem is presented in the mobile version
Do you have the code for Media Queries? That would be wonderful
Thank you very much!!!
Do you have an update on this, does not seem to work with latest, 3.3.0