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.

search-flyout

This will be based on the Sample theme and will use the the area of the full width menu in the primary location.

Live demo here.

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' );
view raw enqueue.php hosted with ❤ by GitHub

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' );
view raw allowphp.php hosted with ❤ by GitHub

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' );
view raw widget.php hosted with ❤ by GitHub

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.

search-widget

<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…

search-flyout-static

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.

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 );
view raw addmenu.php hosted with ❤ by GitHub

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 );
view raw search.php hosted with ❤ by GitHub

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');
});
});
});
view raw search.js hosted with ❤ by GitHub

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;
}
view raw search.css hosted with ❤ by GitHub

And this is the result:

menu-closed

Search Closed

 

menu-open

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.

menu-closed-mobile

12 Comments

  1. aashish pahwa on April 4, 2017 at 7:37 am

    Hi

    I tried to add as you said. But my search button isn’t working. Help please?
    My website is feedough.com

    • aashish pahwa on April 4, 2017 at 7:50 am

      update – the search box is working at the top but the search box doesn’t appear when I scroll down.

  2. Daniel on January 27, 2017 at 1:43 pm

    How do I add the containers if the widget only has a title area to insert text?

  3. Andy on January 4, 2017 at 5:56 pm

    How do I get this to work on a custom menu (not primary or secondary)?

  4. Dave Terrell on December 14, 2016 at 4:20 pm

    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.

  5. kandyce on November 26, 2016 at 2:30 am

    “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?

  6. Nicola on November 13, 2016 at 2:55 pm

    Hey any chance you could help? Mine keeps going about the menu? http://birdanddesign.com/

    • Neil Gowran on November 13, 2016 at 9:39 pm

      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 );

  7. Danielle Frappier on March 23, 2016 at 1:46 pm

    Great Tutorial! Thank you so much!

  8. Tom on September 15, 2015 at 3:39 pm

    Hello,

    its cool, but is it possibble get it working with woocommerce search?
    Thanks you

  9. Maria on June 1, 2015 at 7:55 pm

    Is there a way to make this work outside the primary menu?

  10. Kien on February 25, 2015 at 6:59 am

    How do I insert into the Secondary Navigation Menu in the magazine pro?

Leave a Comment





%d bloggers like this: