This tutorial provides the steps to add a magnifying glass search icon at the right of Primary nav menu in Genesis, which when clicked, will show a search box covering the entire site header based on the code from Monochrome Pro.
While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme
Step 1
Replace the entire content of js/genesis-sample.js with:
/**
* Genesis Sample entry point.
*
* @package GenesisSample\JS
* @author StudioPress
* @license GPL-2.0+
*/
var genesisSample = ( function( $ ) {
'use strict';
/**
* Adjust site inner margin top to compensate for sticky header height.
*
* @since 2.6.0
*/
var moveContentBelowFixedHeader = function() {
var siteInnerMarginTop = 0;
if( $('.site-header').css('position') === 'fixed' ) {
siteInnerMarginTop = $('.site-header').outerHeight();
}
$('.site-inner').css('margin-top', siteInnerMarginTop);
},
/**
* Initialize Genesis Sample.
*
* Internal functions to execute on document load can be called here.
*
* @since 2.6.0
*/
init = function() {
// Run on first load.
moveContentBelowFixedHeader();
// Run after window resize.
$( window ).resize(function() {
moveContentBelowFixedHeader();
});
// Run after the Customizer updates.
// 1.5s delay is to allow logo area reflow.
if (typeof wp.customize != "undefined") {
wp.customize.bind( 'change', function ( setting ) {
setTimeout(function() {
moveContentBelowFixedHeader();
}, 1500);
});
}
// Make sure JS class is added.
$('body').addClass('js');
// set the variables.
var $header = $('.site-header'),
$hsToggle = $('.toggle-header-search'),
$hsWrap = $('#header-search-wrap'),
$hsInput = $hsWrap.find('input[type="search"]');
// Handler for click a show/hide button.
$hsToggle.on('click', function (event) {
event.preventDefault();
if ($(this).hasClass('close')) {
hideSearch();
} else {
showSearch();
}
});
// Handler for pressing show/hide button.
$hsToggle.on('keydown', function (event) {
// If tabbing from toggle button, and search is hidden, exit early.
if (event.keyCode === 9 && !$header.hasClass('search-visible')) {
return;
}
event.preventDefault();
handleKeyDown(event);
});
// Handler for tabbing out of the search bar when focused.
$hsInput.on('keydown', function (event) {
if (event.keyCode === 9) {
hideSearch(event.target);
}
});
// Helper function to show the search form.
function showSearch() {
$header.addClass('search-visible');
$hsWrap.fadeIn('fast').find('input[type="search"]').focus();
$hsToggle.attr('aria-expanded', true);
}
// Helper function to hide the search form.
function hideSearch() {
$hsWrap.fadeOut('fast').parents('.site-header').removeClass('search-visible');
$hsToggle.attr('aria-expanded', false);
}
// Keydown handler function for toggling search field visibility.
function handleKeyDown(event) {
// Enter/Space, respectively.
if (event.keyCode === 13 || event.keyCode === 32) {
event.preventDefault();
if ($(event.target).hasClass('close')) {
hideSearch();
} else {
showSearch();
}
}
}
};
// Expose the init function only.
return {
init: init
};
})( jQuery );
jQuery( window ).on( 'load', genesisSample.init );
Step 2
Edit functions.php.
a) Inside genesis_sample_enqueue_scripts_styles(), add at the end
wp_enqueue_style(
'monochrome-ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css',
array(),
CHILD_THEME_VERSION
);
b) At the end of functions.php, add
add_action( 'genesis_header', 'custom_get_header_search_toggle' );
/**
* Outputs the header search form toggle button.
*/
function custom_get_header_search_toggle() {
printf(
'<a href="#header-search-wrap" aria-controls="header-search-wrap" aria-expanded="false" role="button" class="toggle-header-search"><span class="screen-reader-text">%s</span><span class="ionicons ion-ios-search"></span></a>',
__( 'Show Search', 'genesis-sample' )
);
}
add_action( 'genesis_header', 'custom_do_header_search_form' );
/**
* Outputs the header search form.
*/
function custom_do_header_search_form() {
$button = sprintf(
'<a href="#" role="button" aria-expanded="false" aria-controls="header-search-wrap" class="toggle-header-search close"><span class="screen-reader-text">%s</span><span class="ionicons ion-ios-close-empty"></span></a>',
__( 'Hide Search', 'genesis-sample' )
);
printf(
'<div id="header-search-wrap" class="header-search-wrap">%s %s</div>',
get_search_form( false ),
$button
);
}
Step 3
Edit style.css.
a) Above the media queries, add
.site-header > .wrap {
position: relative;
}
.menu-toggle {
margin: 10px 30px 0 auto;
}
.header-search-wrap {
display: none;
}
.js .header-search-wrap {
position: absolute;
z-index: 1001; /* Show above the menu toggle button */
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: none;
transition: none;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
.js .header-search-wrap .search-form,
.js .header-search-wrap input[type="search"] {
height: 100%;
}
.search-visible .header-search-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.header-search-wrap:target {
display: block;
clear: both;
position: relative;
}
.header-search-wrap input[type="search"] {
padding: 0;
border: 0;
}
.header-search-wrap input[type="submit"]:focus {
right: 50px;
margin-top: 1px;
padding: 20px;
border-radius: 3px;
}
.js .toggle-header-search.close:focus {
outline: 0;
}
.toggle-header-search.close {
position: absolute;
z-index: 100;
top: 0;
right: 0;
width: 30px;
height: 100%;
padding: 0;
color: #000;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-webkit-transform: translate3d(-6px,0,0);
transform: translate3d(-6px,0,0);
}
.header-search-wrap:target .toggle-header-search.close {
-webkit-transform: none;
transform: none;
}
.toggle-header-search .ionicons {
font-size: 12px;
font-size: 1.2rem;
-webkit-transform: scale(2);
transform: scale(2);
}
.toggle-header-search.close .ionicons {
position: absolute;
top: calc(50% - 5px);
right: 0;
-webkit-transform: scale(3);
transform: scale(3);
}
.toggle-header-search {
position: absolute;
right: 5px;
top: 20px;
}
b) At the end of 960px min-width media query, add
/* Header Search
--------------------------------------------- */
.site-header > .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.title-area,
.nav-primary {
float: none;
}
.nav-primary {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: right;
}
.toggle-header-search {
position: static;
display: block;
padding: 12px 15px;
line-height: 1;
margin-left: 20px;
}