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.

search-form-simple-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 :

http://codex.wordpress.org/Function_Reference/get_search_form

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: