Age of Article Warning: This article was originally published a few years ago. The information, tips and techniques explained may outdated. Examples shown on this page may no longer work. Please consider this when viewing the below content.

Once you have created great content for your WordPress website or blog, you might find that people start using your WordPress search form (if you have one setup on your website).However you soon realise that the default search form isn't all that great. That's why developers have created search plugins, that allow you to customise and enhance the search form.But if you are simply looking to enhance your search form, so that people can search for posts or articles within different categories, then the following tutorial may be really useful for you.For example, imagine that you have created a website/blog all about food recipes. Perhaps you have setup post categories such as curries, soups, lunch ideas, etc. Now wouldn't it be better if people could search for dishes by category. Maybe I am looking for a curry with chicken in it, so I don't want my search to show soups or lunch ideas, just curries.

Add a WordPress Special Search Form Shortcode

Using the code snippet below will enable a special search form that will make it easier for searches on your website. Plus you can add that special search form using a simple shortcode, anywhere on your website.First we create the function. Add the following code into your childtheme's functions file (or alternatively into an mu-plugin file). function dtwd_special_search_shortcode(){

   ob_start(); ?>

<div id="special-search-shortcode">

<p>Search for articles using the form below</p>

<form method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">

<fieldset>

<input class="special-search-input-box" type="text" name="s" value="" placeholder="enter search keywords&hellip;" maxlength="50" required="required" />

<select name="category_name" class="special-search-select-box">

<option value="enter-category-slug-here">Category Name</option>

<option value="enter-category-slug-here">Category Name</option>

<option value="enter-category-slug-here">Category Name</option>

</select>

<button type="submit">Search</button>

</fieldset>

</form>

</div>

<?php $specialsearch = ob_get_clean();

return $specialsearch;

}

add_shortcode('special-search', 'dtwd_special_search_shortcode');

Important ****On the lines where you see "enter-category-slug-here", this needs to be changed for the actual slugs of the categories that you want to allow searching within. Also change the "Category Name" for the name of your category.To use your new search form, simply use the shortcode [special-search]. You can add it onto posts and pages. Or you could add it into a sidebar text widget. Or you could also add it into a page template.It will need some styling, and you might've noticed that I allowed for some styling classes and ids in the function code. The following css will get you started.#special-search-shortcode {

   border: 1px solid #e9eee9;

   box-shadow: 3px 3px 5px #ccc;

   box-sizing: border-box;

   margin: 50px auto;

   max-width: 350px;

   padding: 10px;

   text-align: center;

   width: 80%;

}

#special-search-shortcode select {

   background: none repeat scroll 0 0 #FFFFFF;

   font-family:Helvetica, Arial, sans-serif;

   border: 1px solid #DDDDDD;

   box-shadow: 0 1px 3px #f0f0f0 inset;

   color: #555555;

   display: block;

   box-sizing: border-box;

   min-width: 180px;

   font-size: 12px;

   font-weight: 500;

   line-height: 1.6em;

   margin: 10px auto;

   max-width: 100%;

   padding: 6px 10px;

   transition: all 0.4s ease 0s; }

#special-search-shortcode input {

   margin: 10px auto;

   border: 1px solid #DDDDDD;

   box-shadow: 0 1px 3px #f0f0f0 inset;

   font-size:12px;

   font-weight: 500;

   color:#333333;

   padding: 10px 15px;

   width:180px;

   box-sizing:border-box;

   font-family:Helvetica, Arial, sans-serif;

   display: block;}

#special-search-shortcode .searchform fieldset button {

   -webkit-border-radius: 4px;

   -moz-border-radius: 4px;

   border-radius: 4px;

   background-color: #2AFF8E;

   color: #fff;

   margin:0 0 10px 10px;

   padding: 5px 10px;

   border:0 none;

   font-family:Helvetica, Arial, sans-serif;

   font-weight:bold;

   font-size:15px;

   cursor:pointer;

   min-width:90px;

   float:none;

}

#special-search-shortcode .searchform fieldset button:hover {

   background-color: #809FFF;

   transition: all 1.4s ease 0s;

}

#special-search-shortcode p {font-size: 16px; font-weight: bold; margin-bottom:16px;}

Feel free to edit the styling to match in with your WordPress theme. If you are going to add the search shortcode into a sidebar text widget, then you might want to style this section differently. Perhaps some css like this might help..textwidget #special-search-shortcode p {display: none;}

.textwidget #special-search-shortcode {width:100%; margin:0;}

If you find that shortcodes aren't working in your text widgets, you can enable this option, by adding the following code snippet to your functions file.add_filter('widget_text','do_shortcode');

For those who prefer to see the process live, I've created a short video tutorial where I implement the above enhanced search function onto a demo website. As a bonus I'm offering this $3.50 video tutorial for FREE until end of this month (June 2014), so feel free to download- Just enter the code FREEJUNE14 - purchase no longer available. Members can view the video below.**Important Note:In the comments, Drake from Drafie-Design.nl kindly suggested an alternative setup that uses wp_dropdown_categories rather than manually adding the categories into the select box of the form. See the comments below for this alternate solution.Premium Club Members can view the video below:[membership]

 

Viewing Premium Content - thanks for being a Premium Club Member


[/membership]

Comments: