In the Oxygen’s Facebook group a user asked:

Please anyone help me to create search form with the search icon I would like the search form be expandable when the icon is clicked

This tutorial provides the steps to display a magnifying glass image which when clicked expands so the user can type their search query and press return to initiate a search in Oxygen.

Step 1

Add a Search Form element in the Oxygen editor. This can be found under the WordPress group.

Step 2

Add HTML5 markup support for the search form (besides other elements).

Step 3

Upload this search icon image to your Media Library.

Step 4

Add the following CSS sitewide:

/* Expanding search form */

.oxy-search-form input[type=search] {
    width: 1px;
    padding: 0 0 0 30px;
    border: none;
    background: url(https://oxygen.test/wp-content/uploads/2018/07/search-icon.png) no-repeat 5px center;
    background-size: 20px 20px;
    cursor: pointer;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition: width 400ms ease, background 400ms ease;
}

.oxy-search-form input[type=search]:focus {
    width: 250px;
    outline: 0;
    cursor: text;
}

.oxy-search-form input[type=submit] {
    clip: rect(0, 0, 0, 0);
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

Replace https://oxygen.test/wp-content/uploads/2018/07/search-icon.png with the URL of your search icon from Step 3.

Custom sitewide CSS like this can be added in Customizer > Additional CSS or in Oxygen editor’s Manage Stylesheets.

Reference: https://developer.wordpress.org/reference/functions/get_search_form/#comment-368

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.
  • Good day Sridhar I just wanted to say thank you for your advice on how to create an expandable search form, thank you very much sir

  • Sridhar in step 2 “Add HTML5 markup support for the search form (besides other elements).” how do I do this I’m a complete novice when it comes to these things

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