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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: