Customise Search Form / Widget in Wordpress

This is a very simple article on how to customise your search widget in Wordpress. As you already know that Wordpress in it's framework provides a search feature, which searches your post, pages etc.

What if you want to change the look and feel of the default search form to something that matches your theme?

Let's first understand how Wordpress creates it's default looking search box.

Wordpress makes use of it's library function get_search_form(), This function spit's out a very basic Search form along with an search input field and a submit button.

Here is how the form looks like.

One way to modify the form is to add some CSS styling for the form elements to change the look and feel of the search form.

What if you want to change the HTML structure to something different from what Wordpress provides.

get_search_form() function first looks out for a file searchform.php to get the HTML for the search form, if this file is not present either in parent or child theme. Then it spits out it's default search form.

Thus in order to customise your search widget, create a new file searchform.php in root folder of your theme directory, and put in your desired form HTML. Here is how mine looks like

<?php
/**
 * Template for displaying search forms in Custom Theme
 *
 * @package WordPress
 * @subpackage Cusotm Theme
 * @since 1.0
 * @version 1.0
 */

?>


<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<input type="search"  class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'unica-wp' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
	<button type="submit" class="search-submit"><i class="ti-search"></i></button>
</form>

You can add the following CSS

.widget .search-form {
	position: relative;
}

.widget .search-form input {
	width: 100%;
	border: 1px solid #9d9d9d;
	padding: 10px 15px;
	padding-right: 55px;
	font-size: 14px;
}

.widget .search-form button {
	position: absolute;
	height: 100%;
	right: 0;
	top: 0;
	border: none;
	width: 50px;
	padding-top: 5px;
	color: #b7b7b7;
	background-color: transparent;
	cursor: pointer;
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
}

And now your search form widget should look like this

Sweet, Isn't it !