Our blog, keeping you up-to-date on our latest news.

 

Customize Search Box in WordPress

May 5, 2013 at 6:51 am | Blog | No comment

 

I added search boxes to my website. It is very easy to add a search box in wordpress. You need only simply add it as a widget to your sidebar, if your wordpress theme supports sidebar.

However, the search box widget may not be sufficient to satisfy some advanced requirements, for example:
1. you want to add search box to the header or other places rather than sidebar.
2. you want to add a search box with advanced query criteria, like a specific category or date etc.

before implementing the advanced features for the search box, we’d better to understand how the search box works in wordpress.

wordpress has a powerful query system. the search function is nothing special than a query as well. it queries posts or pages based on the keyword parameter “s”. for example, you want to query posts related to “aurelius”, the parameter is: “s=aurelius”, and you can try this on your web browser: http://pengbos.com/?s=aurelius, and you will get the results on aurelius.

if we understand this, we can easily implement a form submit to the site, like this:

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
      <div>
            <input type="text" value="<?php echo esc_html($s); ?>" name="s" id="s" />
	    <input type="submit" id="submitbtn" value="Search" class="btn" />
       </div>
</form>

the esc_html is used in order to get the input sanitized.

We can put this code in the places where we want it to be. and also we can easily decorate the form with CSS as we want.

And now, we want to query posts in a specific category. we only need to add another parameter to the query, “cat” or “category_name”, for example: “s=aurelius&cat=6”. we can implement the form like:

	<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
	<div>
         <input type="text" value="<?php echo esc_html($s); ?>" name="s" id="s" />
         <select name="cat" id="cat"> 
                <option value="">Select a Category</option> 
                <?php 
                 $allcategories=  get_categories(); 
                 foreach ($allcategories as $c) {
                           $option = '<option value="'.$c->cat_ID.'"';
                           $option .= '>';
                           $option .= $c->name;
                           $option .= '</option>';
                           echo $option;
                   }
                  ?>
            </select>
            <input type="submit" id="submitbtn" value="Search" class="btn" />
	</div>
	</form>

Actually, wordpress query accepts more parameters than only “s” and “cat”, here is the whole list of public parameters of wordpress query:

$keys = array(
			'error'
			, 'm'
			, 'p'
			, 'post_parent'
			, 'subpost'
			, 'subpost_id'
			, 'attachment'
			, 'attachment_id'
			, 'name'
			, 'static'
			, 'pagename'
			, 'page_id'
			, 'second'
			, 'minute'
			, 'hour'
			, 'day'
			, 'monthnum'
			, 'year'
			, 'w'
			, 'category_name'
			, 'tag'
			, 'cat'
			, 'tag_id'
			, 'author_name'
			, 'feed'
			, 'tb'
			, 'paged'
			, 'comments_popup'
			, 'meta_key'
			, 'meta_value'
			, 'preview'
			, 's'
			, 'sentence'
			, 'fields'
			, 'menu_order'
		);

From this list, you can see that you can query posts/pages by other parameters like author name, date etc, and implement a more powerful search box.

Happy searching!

<< Back to Blog Discuss this post

 
Comments are closed.