Customize WordPress Search form

We already reviewed a nice technique to manipulate the menus in WordPress, let’s overview how to deal with the search form provided by WordPress.

By default here is the form rendered in html :

<form id="searchform" class="searchform" action="/" method="get"> <div><label class="screen-reader-text" for="s">Search for :</label> <input id="s" name="s" type="text" value="" /> <input id="searchsubmit" type="submit" value="Search" /></div> </form>

How to add an icon inside the search element ?

This one is simple as we only need to code some CSS but if we need to add a class or id to this search element, here is how to do :

First let’s add a round corner and an icon :

form#searchform input { background  : #f3efec url(/wp-content/themes/yourtheme/images/search.png) no-repeat left; height          : 25px; line-height : 25px; border          : 1px solid #f4f3ef; text-indent : 10px; -moz-border-radius : 10px; border-radius   : 10px; }

And now, we change the id to make it search instead of searchform and we remove the submit button as well as the label :

All it takes is to add some lines inside the functions.php file :

/** * Take control on the search form * */ function my_search_form( $form ) { $form = ' <form id="search" action="' . home_url( '/' ) . '" method="get"> <input id="s" name="s" type="text" value="' . get_search_query() . '" /> </form>'; return $form; } add_filter( 'get_search_form', 'my_search_form' );

You can see above that you can customize the search form the way you like, adding anything, or removing about everything…


Sources :

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Want more information?

Related links will be displayed within articles for you to pick up another good spot to get more details about software development, deployment & monitoring.

Stay tuned by following us on Youtube.

%d bloggers like this: