In this article, we will see how you can create a custom search form in wordpress using two different methods- by adding code, and not adding code.
Method 1- Wordpress custom search form by adding code.
All wordpress sites come with a default search form. Given that you are here, you want to edit the look and feel of your search form- The placeholder, the submit button, size of the search box, etc.
You can add a search form by including
<?php get_search_form(); ?>
in your wordpress template.
For creating a custom search form, create a new PHP file called searchform.php and save it to your themes folder. You can add the following form code to this file.
<form role="search" method="get" class="searchform group" action="<?php echo home_url( '/' ); ?>"> <label> <span class="offscreen"><?php echo _x( 'Search for:', 'label' ) ?></span> <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" /> </label> <input type="image" alt="Submit search query" src="<?php echo get_template_directory_uri(); ?>/images/search-icon.png"> </form>
Method 2- Using WP custom search form wordpress plugin
Add wordpress custom search form
- Install the custom search form wordpress plugin from here.
- Go to https://cse.expertrec.com/newuser?platform=wordpress
- Enter your website URL and initiate a crawl.
- Wait till all your site pages of your website have been crawled.
- Download expertrec’s search plugin from here
- In your wordpress admin panel, go to Plugins-> Add New-> Upload plugin
- Upload expertrec wordpress zip and click install.
- Click on the Activate plugin.
- In your left panel you must be able to see expertrec’s logo, click on that.
- Go to https://cse.expertrec.com/csedashboard/home/Status and copy your site ID.
- Paste your site ID inside your expertrec plugin page
- Subscribe to a paid plan (9 USD per month).
- That’s it, you have added a search form to your website. here is a snapshot.
- Now you can go to https://cse.expertrec.com/csedashboard/looknfeel/inputbox and here you will be able to style your wordpress search form the way you want it to look.
