
Just solving the code on how to create full screen overlay search form in Genesis Sample Theme.
Ya, after reverse the css and php code, finally I can make animated search form that work pretty smooth and light weight. And the most important is work in genesis sample theme.
This code is meant for genesis theme only. If you are not using genesis theme by StudioPress, get them one here: Get Genesis FrameWork + Sample Theme
For the live demo, you can check how it looks here at Digimanx. And at my other website who using Genesis sample theme.
If this is kind of animated full screen overlay search form that you meant to? then .. let’s get your hand dirty to make it your own 🙂
Creating Full Screen Overlay Search Form
Ok, here are the code that you can place on your WordPress site. First, you need to create files using notepad or Text editor and name it global.js.
If you are using macOS Text Editor, make sure to format it as plain text. Then insert the code below.
global.js code
jQuery(function( $ ){ $('#main-nav-search-link').click(function(){ $('.search-div').show('slow'); }); $("*", document.body).click(function(event){ // event.stopPropagation(); var el = $(event.target); var gsfrm = $(el).closest('form'); if(el.attr('id') !='main-nav-search-link' && el.attr('role') != 'search' && gsfrm.attr('role') != 'search'){ $('.search-div').hide('slow'); } }); });jQuery(function( $ ){ $( '#main-nav-search-link' ).click(function(event){ if ( event.target !== this ) return; $('.search-div' ).slideToggle(function() { $(this).parent().toggleClass( 'search-open' ); }); }); });
Upload these files to your host. On cPanel go to folder public_html > WP Content > themes > genesis-sample > js.
You can upload these files directly from your browser or using FTP client such FileZilla etc.
Additionally you can also create the file directly from cPanel.
Adding PHP code
Next, you need to add php code to enqueue scripts and styles. To do it, In your WP Admin page go to Appearance > Editor.
Then copy and paste the PHP code below to the theme function.php. Please see the screenshot where to put the global.js code the right way.
wp_enqueue_script( 'global', get_bloginfo( 'stylesheet_directory' ) . '/js/global.js', array( 'jquery' ), '1.0.0', true );
Adding the Font Awesome or Ion Icon (Example)
To add ‘FontAwesome‘ fonts and styles to your theme, place this code at the end of the theme function.php.
//* Enqueue scripts and styles add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts_styles' ); function custom_enqueue_scripts_styles() { wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' ); }
But since I prefer to use Ion Icon and this tutorial meant to use Ion Icon, you may also need to add this line on your theme function.php
//* Enqueue Ionicons add_action( 'wp_enqueue_scripts', 'digi_enqueue_ionicons' ); function digi_enqueue_ionicons() { wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION ); }
And next add_filter to your theme functions.php in order to install search form on the header nav.
add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 ); /** * Filter menu items to append a search form. * * @param string $menu HTML string of list items. * @param stdClass $args Menu arguments. * * @return string Amended HTML string of list items. */ function theme_menu_extras( $menu, $args ) { if ( 'primary' !== $args->theme_location ) return $menu; $menu .= '<li class="search"><a id="main-nav-search-link" class="ion-ios-search" title="Search"></a><div class="search-div"><span class="close" title="close"><i class="icon ion-close"></i></span><span class="glass"></span>' . get_search_form( false ) . '</div></li>'; return $menu; }
Now save the change by click Update Files button on WP Themes Editor.
Check your site, and you’ll found that you have search form on your header menu.
Yeah! it still looks messy. So next, you’ll need to make it looks good by adding style with CSS.
Playing with CSS to make the full-screen overlay search form
The final touch to make animated full screen overlay search form works on Genesis Sample by using CSS a little trick.
Copy and paste code below using WordPress built-in CSS editor. You don’t need to change the original Genesis CSS file.
/* Overlay Search Form ---------------------------------- */ .nav-primary .genesis-nav-menu > .search { display: inline-block; position: relative; width: auto; padding: 0; } li a.ion-ios-search:before { font-weight: bold; font-style: normal; text-decoration: inherit; font-size: 2rem; position: absolute; top: 0; float: left; right: 0; color: #555; } @media only screen and (max-width: 1000px){ li a.ion-ios-search:before { left: 8px;} } @media only screen and (max-width: 414px){ li a.ion-ios-search:before { left: 4%;} } li a.icon-search { cursor: pointer; } /*li a.icon-search:hover { border-bottom: none; }*/ .search-div { display: none; position: fixed; width: 0; border-radius: 4; -webkit-border-radius: 4px; } .search-div .search-form { position: fixed; right: 0; left: 0; margin: 0 auto; margin-right: auto; margin-left: auto; margin-top: 100px; height: 60px; width: 440px; border-radius: 4px; -webkit-border-radius: 4px; -webkit-transition: all ease-out .5s; -moz-transition: all ease-out .5s; -o-transition: all ease-out .5s; transition: all ease-out .5s; } .search-div .search-form input[type="search"]{ height: 100%; width: 100%; padding: 10px; font-size: 16px; border-radius: 4px; background-color: #eee; } .search-div .search-form input:focus[type="search"]{ border: 1px solid #ddd; color: #333; background-color: #fff; } .search-div .search-form input[type="submit"] { position: absolute; padding: 10px 14px; -webkit-border-radius: 0; border-radius: 0; color: #eee; background: #D75B5B; z-index:9999; } .search-form input[type="submit"] { font-family: FontAwesome; content: '\f002'; clip: inherit; width: 16px; height: 1px; background: transparent; color: #666; font-size:15px; font-weight: normal; } .search-div .search-form input:hover[type="submit"] { background: #333; color: #fff; } .site-header .search-form input[type="submit"], .widget_search .button input[type="submit"] { font-family: FontAwesome; display: inline-block; -webkit-font-smoothing: antialiased; clip: inherit; vertical-align: middle; border: 1px solid #ddd; position: absolute; bottom: 0; overflow: hidden; right: 0; width: 50px; height: 100%; } /* Clear search field placeholder text on focus */ input:focus::-webkit-input-placeholder { color: transparent; border-radius: 50px; } input:focus:-moz-placeholder { color: transparent; } /* Firefox 18- */ input:focus::-moz-placeholder { color: transparent; } /* Firefox 19+ */ input:focus:-ms-input-placeholder { color: transparent; } /* oldIE */ .glass { position: fixed; top: 0px; left: 0px; padding: 100%; background: rgba(0,0, 0,0.7); } .close { position: relative; top: -15px; cursor: pointer; font-weight: normal; color: #fff; z-index: 9999; padding: 0; } .close:hover { color: #D75B5B; }
Dealing with viewport
So far the full screen overlay search form looks good on desktop version.
But yeah! it may look not so good on smaller screen and on mobile devices. So, you’ll need to add other css code to fix it.
@media only screen and (max-width: 1000px) { .nav-primary .genesis-nav-menu > .search { display: block; text-align: left; } .search-div { left: 0; } .search-div .search-form { position: fixed; right: 0; left: 0; margin: 0 auto; margin-right: auto; margin-left: auto; margin-top: -240px; } .close { left: 50px; margin-top: -12px; float: left; position: absolute; } } @media only screen and (max-width: 414px) { .search-div { width: auto; } .search-div .search-form { position: fixed; right: 0; left: 0; margin: 0 auto; margin-right: auto; margin-left: auto; margin-top: -240px; width: 250px; } .close { margin-left: -6px; margin-top:-12px; float: left; position: absolute; } }
And thats it! now you have animated fullscreen overlay search form on your Genesis Sample theme.
Other
Be creative with the css code. Because it may have positioning issue with your site design.
Use Google Chrome developer tools to check how it looks on every devices.
If you have other idea to make the CSS code more simple and clean. Please let me know on the comment section below. Thanks 🙂
Hello, I just did all the steps and got a problem.
When I click the icon of search, is appears the form but disappear promptly, I can barely type anything in the form, do you know how can fix that?
Btw, really thanks for your tutorials, they are really helpful!
Hi Youi, this issue usually happens when you are using the pre-made Genesis Theme that already has the global.js file.
To fix that try to create another JS file and name it .eg custom-search.js put the JQuery code right there and enqueue the script in the PHP code just the way you enqueue the scroll back to top script. And delete the custom search script code from the global.js file.
By the way, if you are using the Genesis Sample Theme, I have updated the tutorial so please read again, this time should works 🙂
Don’t forget to delete the cache on your browser after you made a change. Just empty the cache, no need to delete your browsing history.
Hi again,
I’m sorry I think I’ve left two same comments and you can just ignore it as I figure it out! It appears finally, however, it got the same problem as last time, when I clicked the icon of “search”, it shows up and dissapears promtly again 🙁
I have updated the CSS, Youi. Please try the new one, maybe it will fix the problem.