Easiest Way to Customize Search Form in Oxygen

it begins with our client site https://bukuhariankorona.org/ . They want to show a search form with some placeholder text. We found the easiest way to customize search form in Oxygen.

Here's the quick step that you can follow and plugin that we use to implement it.

Easiest Way to Customize Search Form in Oxygen

Quick Step:

  1. Add HTML 5 Support
  2. Add Snippet Code to change submit button and placeholder
  3. Customize using CSS

Tools that we're using:

  1. Code Snippets or Advanced Scripts by Clean Plugin

Add HTML 5 Support

Add new snippets on Code Snippets and give title to it i.e "Theme Support" Insert this code on Code Snippets or Advanced Scripts plugin.

add_theme_support( 'html5', array('search-form') );

or you can simply install WPDevDesign – Oxygen – Essentials Plugin by Sridhar Katakam

Add Snippet Code to change submit button and placeholder

I found this code from Change placeholder text for wordpress search box. Add new snippets and give name to it. Then insert this code on snippets or Advanced Scripts Plugin.

function html5_search_form( $form ) { 
     $form = '<section class="search"><form role="search" method="get" id="search-form" action="' . home_url( '/' ) . '" >
    <label class="screen-reader-text" for="s">' . __('',  'domain') . '</label>
     <input type="search" value="' . get_search_query() . '" name="s" id="s" placeholder="Type something here..." />
     <input type="submit" id="searchsubmit" value="'. esc_attr__('Search', 'domain') .'" />
     </form></section>';
     return $form;
}

 add_filter( 'get_search_form', 'html5_search_form' );

Note: You can change the placeholder text "Type something here..." into your desirable placeholder. Our website using this placeholder as example "Try: WordPress". You can change the submit button text default was Search into your own text like "Search Article" by changing 'Search' on snippet.

Customize Oxygen Search Form Using CSS

Before we customizing the search form, make sure we need to find the id of that element. You can change the id of Search form Element, but in this case I'm using the default id.

Add Code Block and Add this CSS

.search-form {
  display: flex;
}

To change the submit button color you can simply add this code and change color and transition property that you prefer. And you can change the width of the submit button.

In this part I want to achieve 50% width search form on desktop. On submit button I set 13% width. And for the input/textarea I set 37%. Here's how it looks on Stories Page

Easiest Way to Customize Search Form in Oxygen

If you want to achieve 100% width form make sure that you change the textarea width and submit button. I.e you can change the submit button width into 20% and textarea width into 80%

#_search_form-428-21 input[type=submit] {
    /*change background color here*/
    background-color: #ff9659;
    /*change submit width here*/
    width: 13%;
}

#_search_form-428-21 input[type=submit]:hover {
    
/*change submit hover bacgkround color here*/
    background-color: #4b41d3;
}

To change the textarea width you change it here.

#_search_form-428-21 input, #_search_form-428-21 textarea {
    border-radius: 5px;
  	border:none;
  	padding:20px;
    /*change background color here*/
    width: 37%;
    transition: 200ms ease-in-out;
}

#_search_form-428-21 input:focus, #_search_form-428-21 textarea:focus {
    /*change focus border color here*/
    border: solid 5px #776fed;
    box-shadow: 0px 0px 15px 2px #776fed;
    outline:none;
}

if you want to make it responsive change the search form size (both submit button and textarea width). You can simply add this code or change it by your own. I.e: I want to implement 100% search form width on 992px width screen and 90% width on 768px.

@media only screen and (max-width: 992px) {
#_search_form-428-21 input, #_search_form-428-21 textarea {
    width: 79%;
}


#_search_form-428-21 input[type=submit] {
    width: 20%;
}

#_search_form-428-21 input[type=submit]:hover {
    width: 20%;
}
}


@media only screen and (max-width: 768px) {
#_search_form-428-21 input, #_search_form-428-21 textarea {
  	padding:15px;
    width: 60%;
}


#_search_form-428-21 input[type=submit] {
    width: 30%;
}
#_search_form-428-21 input[type=submit]:hover {
    width: 30%;
}
}

Full CSS

Here's the Full CSS of this tutorial

#_search_form-428-21 input, #_search_form-428-21 textarea {
    border-radius: 5px;
  	border:none;
  	padding:20px;
    width: 37%;
  	transition: 200ms ease-in-out;
}

#_search_form-428-21 input:focus, #_search_form-428-21 textarea:focus {
    border: solid 5px #776fed;
    box-shadow: 0px 0px 15px 2px #776fed;
  	outline:none;
}


#_search_form-428-21 input[type=submit] {
    background-color: #ff9659;
    width: 13%;
  	transition: 1s ease;
}

#_search_form-428-21 input[type=submit]:hover {
    background-color: #4b41d3;
    width: 13%;
}

@media only screen and (max-width: 992px) {
#_search_form-428-21 input, #_search_form-428-21 textarea {
    width: 79%;
}


#_search_form-428-21 input[type=submit] {
    width: 20%;
}

#_search_form-428-21 input[type=submit]:hover {
    width: 20%;
}
}


@media only screen and (max-width: 768px) {
#_search_form-428-21 input, #_search_form-428-21 textarea {
  	padding:15px;
    width: 60%;
}


#_search_form-428-21 input[type=submit] {
    width: 30%;
}
#_search_form-428-21 input[type=submit]:hover {
    width: 30%;
}
}

That's it! if you want to find tutorial like this you can go to our Stories

References

  1. Change placeholder text for wordpress search box by Md. Elias
  2. https://wpdevdesign.com/how-to-add-support-for-html5-markup-in-oxygen/ by Sridhar Katakam
Share This Article

You Might Want To Read

Leave a Reply

Your email address will not be published. Required fields are marked *

arrow-right