Published on Jun 30, 2019

Header Search in Oxygen

Sridhar Katakam

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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-ocalendar-check-omagnifiercrossmenuchevron-downarrow-right