In this article, we will see how you can create a custom wordpress search form using two different methods- by adding code, and not adding code.
Method 1- WordPress search form by adding code. (Free)
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 could opt for method 2 which gives you more fine grained controls.
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
?>"> <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');
?>" name="s" title="<?php
echo esc_attr_x('Search for:', 'label');
?>" /> </label> <input type="image" alt="Submit search query" src="<?php
This adds just a search form to your wordpress site which uses the default wordpress search. To have a better search functionality on your wordpress site, you could follow the steps below.
Method 2- With the WP Fastest site search plugin.
- Go to https://cse.expertrec.com/newuser?platform=wordpress
- Enter your website URL and initiate crawl.
- Wait till all your site pages of your website have been crawled.
- Download and install the WP fastest site search plugin from here.
- Go to https://cse.expertrec.com/csedashboard/home/Status and copy your site ID.
- Click on site search icon in your wordpress admin panel. Copy paste your API key from from inside your wordpress admin panel
- This plugin adds a better performing search form to your website.
- Subscribe to a paid plan (9 USD per month).
- That’s it, you have added a search form to your wordpress site . 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.
Here is a sample UI for a search form (credit: online tutorials),
The following video explains how this could be built using html and css. The same css could be used in the Expertrec control panel to style your functional search box.