Website Guider

The Ultimate Resource for WPadmins and Geeks

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.

Full Screen Search Overlay Box

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.

Raashid Din Dar

Raashid Din Dar is a web developer and designer. He specialises in WordPress Theme and Plugin development. Also, Web Designing is what he loves.He loves to read books and play with friends.

3 thoughts on “Add a Full Screen Search Overlay in Genesis (Without Plugin)

    1. Hi,
      Will you please let us know what error are you facing so that we can check it on our side.
      Thanks for leaving comment.

Leave a Reply

Your email address will not be published.

Back to top