Header Search in Revolution Pro

This tutorial provides the steps to add a header search option in revolution pro theme similar to what we have Header search in Genesis Sample based on Monochrome Pro child theme.

Tested with js and without js (no-js) in browser.

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

1. Adding icon pack Ionicons.
2. Adding javascript for making the search box appear inline.
3. Adding snippet in the site header to show the search widget.
4. Adding CSS files to the stylesheet.

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.