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 (one-time payment for lifetime access).

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

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: