Learn how to place a search icon in Genesis Sample that, when clicked, opens a search field that takes up the entire width of the page.
Having a search icon at the top of the site improves the user experience (UX) by allowing readers to get straight to the point.
While this functionality can be implemented in a variety of ways, one of the most visual and intuitive is the Monochrome Pro child theme strategy.
It has a magnifying glass icon and when you click it, it opens a search form that uses the full height and width of the header. This way, it generates a wide space so that the visitors can easily introduce the term they want to find.
Do you want to achieve this same effect in Genesis Sample child theme?
Here’s how.
Steps to insert the Monochrome Pro search engine in Genesis Sample using code
1. Create a header-search.js file
Insert this snippet into a new header-search.js file:
To see this and another 917 code snippets of this website, login or subscribe here.
This script is in charge of managing all the effects derived from the interaction with the search icon.
Place this file in the /js/ folder of the child theme.
2. Modify the functions.php file
Now add to the end of the functions.php file the following code:
To see this and another 917 code snippets of this website, login or subscribe here.
With these lines you get to:
- Insert the script in charge of the behavior of the search icon (header-search.js).
- Add the search icon in the header.
- Add the search form to the header.
3. Modify the style.css file
Finally, enter the following code at the end of the style.css file:
To see this and another 917 code snippets of this website, login or subscribe here.
With this last step, you get to apply the styles so that everything looks right.
3.1. Alternative
If you prefer, you can place the first part of the code (up to the media queries) in the Site Header section and the rest after the media queries.
What is the advantage of inserting everything at the end?
If the child theme receives an update you will find it easier to copy the snippet and paste it back into the new version.
So, depending on the project, you will be interested in applying these changes in one way or another. Your pick. 😉
Conclusions
Offering the search option at the top of the page promotes a good user experience.
And this is even more important for web conversions if we are talking about an ecommerce or a page with a lot of content.
Genesis Sample is a good place to start, so why not to enhance it by adding a search form that takes up the entire header, just like it happens on Monochrome Pro?
If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.
Benefits of being a subscriber. 🙂
