Wordpress Build Search Form

[WP] | Add a Wordpress Search Form in 5 minutes – No code

Rate this article

Share this article

How to build a Wordpress search form for your WordPress website that visitors can use to search for content inside your website. 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. Make sure that you have also read best search engines for WordPress before following the instructions below.

Wordpress Build Search Form

 

Add wordpress search form

A WordPress website’s search functionality is a crucial element for enhancing user experience and ensuring that visitors can easily find the content they’re looking for. In this article, we’ll explore two methods of creating a custom WordPress search form – one involving code and the other without. Before diving into the steps, it’s essential to familiarize yourself with the best search engines for WordPress, as this knowledge will complement your efforts to optimize your website’s search functionality.

Custom WordPress Search Form with Code:

Building a custom search form with code provides you with the flexibility to tailor the search experience according to your specific requirements. Here’s a step-by-step guide:

a. Locate the searchform.php file:

vbnet
Copy code
Start by accessing your WordPress theme files and locate the searchform.php file. If it doesn’t exist, you can create one in your theme directory.

b. Modify the search form HTML:

css
Copy code
Open the searchform.php file and add or modify the HTML code to create a custom search form. You can include additional fields, styling, or any other elements to align with your website’s design.

c. Implement custom search functionality:

vbnet
Copy code
Customize the search functionality by modifying the search loop in your theme’s search.php file. This step ensures that the search form interacts seamlessly with your website’s content.

Custom WordPress Search Form without Code:

For those who prefer a code-free approach, various plugins are available to help you create a custom search form effortlessly. Here’s a straightforward method:

a. Install a search plugin:

sql
Copy code
Head to the WordPress Plugin Directory and search for a reliable search plugin. Choose one that suits your needs, considering factors like customization options, compatibility, and user reviews.

b. Activate and configure the plugin:

css
Copy code
Install and activate the chosen plugin, then navigate to the settings to configure the search form according to your preferences. Most plugins offer a user-friendly interface, allowing you to make adjustments without touching a single line of code.

c. Place the search form on your website:

vbnet
Copy code
Once configured, you can easily add the custom search form to your website. Depending on the plugin, you may have the option to use shortcodes or widgets to embed the search form on specific pages or in the site’s header.

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 the following code in your WordPress template
    <?php get_search_form(); ?>
  • 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>

     

  • This adds just a search form to your WordPress site which uses the default WordPress search. To have better search functionality on your WordPress site, you could follow the steps below in method 2.

Method 2- Wordpress search form using expertrec custom search engine

Add wordpress search form

  • Go to the wordpress admin panel . Click on plugins->add new plugin and search for wordpress fastest site search . Install it and dont forget to activate the plugin.
    wordpress search form
  • After activating the plugin you willbe navigated to signup page. It is a two step process. In the step1 you need to enter site url(by default it get filled automatically) and need to select indexing option(if woocommerce is not active).Then click the continue button for step2.
    wordpress search form
  • In the step2 you will have 2 options . Either signup through google or you can signup through otp. Choose an option and complete signup.Wordpress search not working
  • For a detailed explaination regarding our plugin integration, features and how it will help in your search you can refer this blog  Wordpress fastest site search
  • 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.
  • 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.

wordpress search form

 

Method 3: Wordpress search form using plugin

TThe following WordPress plugin adds a WordPress search form.

WP Fastest Site Search

Conclusion:

Whether you opt for a code-based approach or leverage plugins, creating a custom WordPress search form empowers you to tailor the search experience for your website visitors. Ensure that the form aligns with your website’s design and user preferences, enhancing overall navigation and content discovery.

By taking the time to implement a custom search solution, you contribute to a positive user experience, encouraging visitors to engage more with your content. Remember to stay informed about the best search engines for WordPress to make informed decisions regarding your website’s search functionality.

 

Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
You may also like