Full width search form on top of the header

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.