Modify WordPress Search From Is Really Easy

Search form in WordPress is a basic need. So that user can find his required content from all the stuffs. Unfortunately default search from style is not that awesome , its look dull and bad. Because WordPress left scope for you to style this as per your theme design or requirements.

There are two ways to style your search from in WordPress. First one  is you can inspect and find the existing class name used by WordPress for the search form and than you can overwrite those css in your stylesheet to make your desired design.  Its a solution but its not a good practice as well as there is a better solution is waiting for you in another solution.

Second Solution: This is the perfect way to update your search form markup and its recommended by WordPress and other theme selling marketplace like themeforest.  WordPress is ready to accept your markup as per your HTML. Because most of the WordPress theme is developed from a HTML template.

In our theme root we just need to add a new php file named searchform.php there you need to add following line of codes. You can find them in codex also.

<form role="search"method="get"class="search-form"action="<?php echo home_url( '/' ); ?>"><label><span class="screen-reader-text"><?php echo_x( 'Search for:', 'label') ?></span><input type="search"class="search-field"placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>"value="<?php echo get_search_query() ?>"name="s"title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>"/></label><input type="submit"class="search-submit"value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>"/></form>

So you have the place to update ,edit or add your own mark up here and you are done. You can add class and ids as per your requirements. Here you can see my updated one

wordpress-searchform-modifying

Beside this you you need to do one more think  to enable HTML5 feature from this from as well as for the entire theme. Simply add the following theme support hook.

functionnuv9_after_setup_theme() {add_theme_support( 'html5', array( 'search-form') );}add_action( 'after_setup_theme', 'nuv9_after_setup_theme');

wordpress-searchform-modifying

Lets see the updated result as per my modifications. The good thing is by doing this you can update the place holder text, buttons submit value and the default search title. That means its a fun now. And if you can make the HTML version perfectly , you don’t need to face any more problems with search form. In similar ways we can update WordPress comment form also, for sure we’ll see that soon.

1 Comment

Rafsan Jany Prodhan
January 4, 2019 At 12:26 pm

Awesome

Leave a Comment