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 ($37/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

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.
    • Hi Carrie.

      In Step 1 try replacing

      $form = str_replace( 'Search …', 'Type what are you looking for and hit return', $form );
      

      with

      $form = str_replace( 'Search ...', 'Type what are you looking for and hit return', $form );
      
  • Hi Sridhar, I’m trying to use it with the sticky header. It works well with a regular header, but when it sticky, the modal disappears / behind the sticky menu. I tried to set the modal Z-index to more than 2147483640 (z-index on the sticky header) but still didn’t work. Is this one of modal limitation? Thank you.

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: