Header Search in Genesis

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.

Screenshots:

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