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:
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 icon pack Ionicons.
- Adding javascript for making the search box appear inline.
- Adding snippet in the site header to show the search widget.
- 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.
To view the full content, please sign up for the membership.
Already a member? Log in below or here.