Header Search in Genesis Sample

This tutorial will provide the steps to add a search icon to the right of site header in Genesis Sample.

Header Search Icon, when clicked, will show a search box covering the entire site header similar to Monochrome Pro. It also works great in devices having No Javascript Enabled.

Preview:

 When Javascript is disabled.

This tutorial can be easily implemented on any other Genesis child theme with minor tweaks.

Let’s start…

Prerequisite:

• Enable js no-js class in body in Genesis

Adding Search Box in Genesis is pretty easy but complicated when the area is under .site-header. Here what we are going to do today

• Adding Font Icon.
• Adding javascript for making the search box appear inline.
• Adding snippet in the site header to show the search form.
• Adding CSS to customize the appearance.

STEP 1

The first step is to Enqueue Ionicons. Add this in functions.php

wp_enqueue_style(
    'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css',
    array(),
    CHILD_THEME_VERSION
);

STEP 2

A. Create a file search.js and place it under your child-theme/js/ folder and add the following script.