Add a Full Screen Search Overlay in Genesis (Without Plugin)

As the trend changes, the design patterns also change. Full-screen search overlay is one of them.

Many popular sites like WebsiteGuider or WebsiteSetup use full-screen search. These websites use WordPress as their CMS.

In this tutorial, we are going to learn how to create or add a full-screen overlay search box in Genesis.

Throughout the entire code, we will use some PHP, Jquery and CSS code.

Before diving more into detail, lets see how it will look.

Creating a Fullscreen Search in Genesis

The first thing you need to do is to add some PHP code in your themes functions.php file.

add_filter( 'wp_nav_menu_items', 'wg_theme_menu_extras', 10, 2 );

function wg_theme_menu_extras( $menu, $args ) {
	if ( 'primary' !== $args->theme_location )
		return $menu;

	ob_start();

	$menu .= '<li class="nav-link-search"><a href="#search" class="toggle-search-box"><i class="fas fa-search"></i></a></li>' . $search . '</li>';

	return $menu;
}

if ( ! is_admin() ){

	// Register the custom made javascript file
	wp_register_script( 'custom-js', get_stylesheet_directory_uri().'/js/search.js', array('jquery'), NULL, true);

	// Enqueue the JavaScript File
	wp_enqueue_script( 'custom-js' );

	$wnm_custom = array( 'stylesheet_directory_uri' => get_stylesheet_directory_uri() );

	// Now include the localized data on every page
	wp_localize_script( 'custom-js', 'directory_uri', $wnm_custom );

	// Add Search Form To Footer
	add_action( 'wp_footer', 'ult_fs_search' );

}

function ult_fs_search()  {

	?>
	<div id="ult-fs-search">
		<button type="button" class="close">×</button>
		<form role="search" class="form-search" method="get" id="searchform" action="<?php echo home_url( '/' );?>" >
			<input type="text" value="" name="s" placeholder="Type Your Keywords Here" />
			<button type="submit" class="btn btn-primary">Search</button>
		</form>
	</div>
	<?php

}

After placing the above code in the functions file, we need to add some CSS to the stylesheet. The CSS is below.

#ult-fs-search { 
    position: fixed;
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.7);
    webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
    -webkit-transform: translate(0px, -100%) scale(0, 0); 
    -moz-transform: translate(0px, -100%) scale(0, 0); 
    -o-transform: translate(0px, -100%) scale(0, 0); 
    -ms-transform: translate(0px, -100%) scale(0, 0); 
    transform: translate(0px, -100%) scale(0, 0); opacity: 0; 
} 

#ult-fs-search.open { 
    -webkit-transform: translate(0px, 0px) scale(1, 1); 
    -moz-transform: translate(0px, 0px) scale(1, 1); 
    -o-transform: translate(0px, 0px) scale(1, 1); 
    -ms-transform: translate(0px, 0px) scale(1, 1); 
    transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1; 
    background: rgba(27, 220, 186, 0.95); 
} 
#ult-fs-search input[type="text"] { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    color: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0); 
    font-size: 60px; 
    font-weight: 300; 
    text-align: center; 
    border: 0px; 
    margin: 0px auto; 
    margin-top: -51px; 
    padding-left: 30px; 
    padding-right: 30px; 
    outline: none; 
} 

#ult-fs-search .btn { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: 61px; 
    margin-left: -45px; 
} 

#ult-fs-search .close { 
    position: fixed; 
    top: 15px; 
    right: 15px; 
    color: #fff; 
    background-color: #428bca; 
    border-color: #357ebd; 
    opacity: 1; 
    padding: 10px 17px; 
    font-size: 27px; 
}

After all this, you need to add Jquery code. First, navigate to wp-content>>themes>>your-theme.

In the themes file, you should see a js folder. If not then you need to create the js folder.

After that create a file named as a search.js and add following code to it.

jQuery( function () { 
	jQuery('a[href="#search"]').on('click', function(event) { 
		event.preventDefault(); 
		jQuery('#ult-fs-search').addClass('open');
		jQuery('#ult-fs-search > form > input[type="text"]').focus(); 
	}); 
	jQuery('#ult-fs-search, #ult-fs-search button.close').on('click keyup', function(event) { 
		if (event.target == this || event.target.className == 'close' || event.keyCode == 27) { 
			jQuery(this).removeClass('open'); 
		} 
	}); 
});

Hope this code helps you in creating the full-screen search box. Feel free to give suggestions to make this code better.