Header Search in Oxygen

Updated on June 02, 2020

This members-only tutorial provides the steps to use the modal feature in Oxygen for sliding down a full-width search form covering the header when a magnifying glass icon in the header is clicked.

Clicking anywhere on the page outside the search form or the close button will fade away the search form.

Step 1

Let's

• enable placeholder text for the search form by adding support for HTML5 markup
• change the placeholder text from the default Search … to a custom "Type what are you looking for and hit return".

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Add support for HTML5 markup

Code:

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );

Set it to run only on front-end. Save changes and activate.

Add another snippet.

Title: Change search form input's placeholder text

Code: