Adding a Fly Out Search Field Box for Genesis based on TwentyFourteen
How to set up a flyout search box on a Genesis Theme based on the TwentyFourteen theme where clicking on the search icon drops down a search field.
This will be based on the Sample theme and will use the the area of the full width menu in the primary location.
Icon
First up for the icon, I am using FontAwesome, enqueue the style:
| // Enqueue scripts and styles | |
| function themeprefix_scripts_and_styles() { | |
| wp_enqueue_Style( 'fontawesome', '//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' ); | |
| wp_enqueue_script( 'hidesearch', get_stylesheet_directory_uri() . '/js/hidesearch.js', array('jquery'), '1', true ); | |
| } | |
| add_action( 'wp_enqueue_scripts', 'themeprefix_scripts_and_styles' ); |
Allow PHP in Widgets
Will be using the WordPress search function in the widgets, so we need to allow that.
//Allow PHP to run in Widgets
function genesis_execute_php_widgets( $html ) {
if ( strpos( $html, "<" . "?php" ) !==false ) {
ob_start();
eval( "?".">".$html );
$html=ob_get_contents();
ob_end_clean();
}
return $html;
}
add_filter( 'widget_text','genesis_execute_php_widgets' );
Register and Position a widget area
This area will hold the actual search box which will initially be hidden.
//Add in new Search Widget areas
function themeprefix_extra_widgets() {
genesis_register_sidebar( array(
'id' => 'search',
'name' => __( 'Search', 'genesischild' ),
'description' => __( 'This is the Search toggle area', 'genesischild' ),
'before_widget' => '<div class="search">',
'after_widget' => '</div>',
) );
}
add_action( 'widgets_init', 'themeprefix_extra_widgets' );
//Position the Search Area
function themeprefix_search_widget() {
genesis_widget_area ( 'search', array(
'before' => '<div id="search-form-container">',
'after' => '</div>',));
}
add_action( 'genesis_after_header','themeprefix_search_widget' );
Populate the Widget
Add a couple of containers around the search form by adding the mark up into the new widget area in the dashboard.
<div id="search-container" class="search-box-wrapper clear"><div class="search-box clear"><?php get_search_form(); ?></div></div>
And this is what we get…
Add in Search Icon trigger
I found this the trickiest bit, this is the search icon that will sit to the right of the primary nav menu which means it will need to sit inside the nav container. There is a filter wp_nav_menu_items that allows you to append mark up to the nav menu.
So here the filter will only apply to the primary menu, the existing primary menu list is closed and another one added to contain the search toggle icon. With some CSS floats added these can float left and right and both sit in the nav element and the 2 lists, menu and icon can be controlled separately.
Full functions.php
| // Enqueue scripts and styles | |
| function themeprefix_scripts_and_styles() { | |
| wp_enqueue_Style( 'fontawesome', '//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' ); | |
| wp_enqueue_script( 'hidesearch', get_stylesheet_directory_uri() . '/js/hidesearch.js', array('jquery'), '1', true ); | |
| } | |
| add_action( 'wp_enqueue_scripts', 'themeprefix_scripts_and_styles' ); | |
| //Allow PHP to run in Widgets | |
| function genesis_execute_php_widgets( $html ) { | |
| if ( strpos( $html, "<" . "?php" ) !==false ) { | |
| ob_start(); | |
| eval( "?".">".$html ); | |
| $html=ob_get_contents(); | |
| ob_end_clean(); | |
| } | |
| return $html; | |
| } | |
| add_filter( 'widget_text','genesis_execute_php_widgets' ); | |
| //Add in new Search Widget areas | |
| function themeprefix_extra_widgets() { | |
| genesis_register_sidebar( array( | |
| 'id' => 'search', | |
| 'name' => __( 'Search', 'genesischild' ), | |
| 'description' => __( 'This is the Search toggle area', 'genesischild' ), | |
| 'before_widget' => '<div class="search">', | |
| 'after_widget' => '</div>', | |
| ) ); | |
| } | |
| add_action( 'widgets_init', 'themeprefix_extra_widgets' ); | |
| //Position the Search Area | |
| function themeprefix_search_widget() { | |
| genesis_widget_area ( 'search', array( | |
| 'before' => '<div id="search-form-container">', | |
| 'after' => '</div>',)); | |
| } | |
| add_action( 'genesis_after_header','themeprefix_search_widget' ); | |
| function custom_nav_item( $menu, stdClass $args ){ | |
| // make sure we are in the primary menu | |
| if ( 'primary' != $args->theme_location ) | |
| return $menu; | |
| $menu .= '</ul><ul class="search-form-container"><div class="search-toggle"><i class="fa fa-search"></i> | |
| <a href="#search-container" class="screen-reader-text"></a> | |
| </div>'; | |
| return $menu; | |
| } | |
| add_filter( 'wp_nav_menu_items', 'custom_nav_item', 10, 2 ); |
Add the jQuery
Create the jQuery to show and hide the search box based on the toggle this should be filed in your js folder and also enqueued, I have named my example hidesearch.js, this is shown in the full functions.php gist above.
| /* | |
| * Toggles Search Field on and off | |
| * | |
| */ | |
| jQuery(document).ready(function($){ | |
| $(".search-toggle").click(function() { | |
| $("#search-container").slideToggle('slow', function(){ | |
| $(".search-toggle").toggleClass('active'); | |
| }); | |
| }); | |
| }); |
Add in a whole bunch of CSS to bring it to life.
| /* # Search | |
| ---------------------------------------------------------------------------------------------------- */ | |
| .menu-primary .menu-item { | |
| float: left; | |
| } | |
| .fa-search { | |
| color: #fff; | |
| } | |
| /* Header search */ | |
| .search-form-container { | |
| position: relative; | |
| } | |
| .search-toggle { | |
| float: right; | |
| padding: 30px 24px; | |
| color: #fff; | |
| text-align: center; | |
| cursor: pointer; | |
| line-height: 1; | |
| } | |
| .search-toggle:hover, | |
| .search-toggle.active { | |
| background: #4d4d4d; | |
| } | |
| @media screen and (max-width: 600px) { | |
| .search-toggle { | |
| position: absolute; | |
| top: -50px; | |
| right: 0; | |
| margin-right: -5%; | |
| background: #4c4c4c; | |
| padding: 17px 24px; | |
| } | |
| } | |
| .search-box-wrapper { | |
| z-index: 999; | |
| width: 100%; | |
| display: none; | |
| } | |
| .search-box { | |
| padding: 1em; | |
| background: #4d4d4d; | |
| } | |
| .search-box input[type="search"]{ | |
| max-width: 350px; | |
| float: right; | |
| padding: 10px 20px 10px 40px; | |
| font-size: 20px; | |
| background-color: #fff; | |
| border: 0; | |
| border-radius: 3px; | |
| } | |
| .search-box input[value="Search"]{ | |
| display: none; | |
| } | |
| /* Text meant only for screen readers - from UnderScores */ | |
| .screen-reader-text { | |
| clip: rect(1px, 1px, 1px, 1px); | |
| position: absolute !important; | |
| right: 0; | |
| } | |
| .screen-reader-text:hover, | |
| .screen-reader-text:active, | |
| .screen-reader-text:focus { | |
| background-color: #f1f1f1; | |
| border-radius: 3px; | |
| box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); | |
| clip: auto !important; | |
| color: #21759b; | |
| display: block; | |
| font-size: 14px; | |
| font-weight: bold; | |
| height: auto; | |
| left: 5px; | |
| line-height: normal; | |
| padding: 15px 23px 14px; | |
| text-decoration: none; | |
| top: 5px; | |
| width: auto; | |
| z-index: 100000; | |
| } |
And this is the result:
Search Closed
Search Open
Demo here, for the mobile menu I use slick nav menu and had a small CSS positioning change for both the menu and search icon to sit alongside each other.
Hi
I tried to add as you said. But my search button isn’t working. Help please?
My website is feedough.com
update – the search box is working at the top but the search box doesn’t appear when I scroll down.
How do I add the containers if the widget only has a title area to insert text?
How do I get this to work on a custom menu (not primary or secondary)?
Exactly what I was looking for and its works like a charm. Only problem I have is that it only works on the home page. It changes colors on hover on the other pages but a click does not open the search box. I’m using Genesis Framework with the Smart Passive Income Theme.
“Demo here, for the mobile menu I use slick nav menu and had a small CSS positioning change for both the menu and search icon to sit alongside each other.” is there a link for a tutorial that can show us that?
Hey any chance you could help? Mine keeps going about the menu? http://birdanddesign.com/
This is likely due to the priority or the hook, try the priority first in the code – find this bit in the code – add_action( ‘genesis_after_header’,’themeprefix_search_widget’ ); and change it to add_action( ‘genesis_after_header’,’themeprefix_search_widget’, 20 );
Great Tutorial! Thank you so much!
Hello,
its cool, but is it possibble get it working with woocommerce search?
Thanks you
Is there a way to make this work outside the primary menu?
How do I insert into the Secondary Navigation Menu in the magazine pro?