Create custom WordPress search form in easy steps
When customizing themes for WordPress, often we want to style & use search forms in our template.
We can easily call WordPress search form in our template files.
<?php get_search_form(); ?>
This call will render WordPress default search form in our pages.
If we don’t have a
searchform.php file in our theme, WordPress automatically generate a search form.
But we have limited customization option at there. So we are going to make that file manually and then style it according to our design.
First make a new PHP file inside our theme / child theme and name it as searchform. It is a clone of default WordPress search form. Then add below code in to that one.
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>"> <div><label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form>
Add CSS selectors ( class & id ) on this form elements & then style them. That’s enough.
Do you need any help on WordPress? I'm happy to help you.
- Get variation product data on selecting variation options - WooCommerce
- Add TinyMCE WYSIWYG (Rich text area) meta box - WordPress
- Reorder product tabs in single product page - WooCommerce
- Download webpage for offline reading - wget
- Remove product tabs in single product page - WooCommerce
Your Questions / Comments
If you found this article interesting, found errors, or just want to discuss about them, please get in touch.