So you mainly want to add a category field to your searches? You can insert additional HTML to the get_search_form() output through a filter, but there’s not much to a search form anyway. A text field named “s” and a submit field. Add in the category field with wp_dropdown_categories() and you will have the necessary fields. Style them with CSS any way you desire.
Thanks (@bcworkz), but I didn’t get your explanation right
I’m sorry. I tend to not phrase things very clearly.
get_search_form() is not very complex, it’s a mere convenience. You will be better off creating your own search form. You can use the HTML output from get_search_form() as a guide in making your own form.
What does get complex is creating a category dropdown field. For this you should use wp_dropdown_categories(). The rest of the form can easily be created in HTML right on the header template.
Thanks a lot (@bcworkz).
Can you please assist me with the code I can use to do that? Because I don’t really understand coding.
Here’s the content part that goes on your template:
<form role="search" method="get" class="search-form" action="<?php echo site_url('/'); ?>">
<label>
<span class="screen-reader-text">Search resources here:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" />
</label>
<?php wp_dropdown_categories(); ?>
<input type="submit" class="submit" value="Search" />
</form>
It will not look like much without proper CSS styling. You’re on your own for that part, sorry. You might investigate your browser’s developer tools. There is a tool for testing out various CSS styles. Once you determine the appropriate styles, copy them to your theme’s style.css page. Naturally you would need to know something about CSS styles. Since these rules control how your site looks, it’s worth learning IMO. It’s much simpler than programming languages, so don’t let the fact that it’s “code” deter you.
If even CSS is too much, you can hire professional assistance at jobs.wordpress.net
Thanks a lot, will try what i can do
i have tried it, it worked, though will need to look for a way to make some enhancement on it.
THANKS A LOT, I REALLY APPRECIATE
Here’s some CSS to get you started. I’m not sure how much it’ll help because success depends on your current theme and where on the page the form is placed. It works with my variant of the twentytwelve theme.
<style>
.search-form {
border: 1px solid #999;
border-radius: 25px;
height: 50px;
position: relative;
width: 90%;
}
.search-field {
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
height: 50px;
width: calc(100% - 240px);
}
#cat {
background-color: #fff;
border: 0 solid #fff;
}
.submit {
border-bottom-right-radius: 25px !important;
border-top-right-radius: 25px !important;
float: right;
height: 50px;
}
</style>
This can go right in front of my previous code. If you find yourself an online CSS reference and learn to navigate your browser’s CSS analyzer, you can figure out any needed adjustments. Don’t be afraid to try different things in the analyzer, reloading the page resets everything. When you come up with a rule that does what you want, add it to this code. Feel free to alter the rules I’ve given you as well.
Warning, once you figure out some of this CSS, you may not be able to stop with the search form. The rest of the site will be yours to tweak 🙂
Will try it to see how it works.
Many thanks!
This is what i have presently have
