How to Create Custom Search Form in WordPress

Used before category names. Blog WordPress WordPress Development

To create a custom search form in WordPress, WordPress provides a method get_search_form() which renders the search form. If you use this method in your theme, you will get a default search form created in WordPress core.

Search is a key part of the online experience, and it’s how most users find information on the web. As such, if a visitor arrives on your site and can’t immediately find what they’re looking for.

WordPress has a search form by default, but it has the code itself. In this tutorial, we will talk about creating a custom search form in the WordPress theme.

Go to your theme folder and create “searchform.php“. WordPress will detect the file and will replace your search form with the default one. Open the file and add the below code inside the file.

if (!defined('ABSPATH')) {
    exit;
}
?>
<div class="search-box-form">
    <form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url("/")); ?>">
        <input type="search" placeholder="<?php esc_attr_e('Search', 'text-domain') ?>" class="search-field" value="<?php echo esc_attr(get_search_query()); ?>" name="s" />
        <button type="submit" tabindex="0" class="search-submit btn btn-default"><?php esc_attr_e('Search', 'text-domain') ?></button>
    </form>
</div>

This code will tell WordPress how the search box form code will be. Now, you can call the code by calling the get_search_form() function where you need.

How to Customize WordPress Search Form and Results by Plugin

Ivory Search is a simple to use advanced WordPress search plugin.

It enhances the default WordPress search and also allows you to create new custom search forms.

SearchWP is the best custom search plugin for WordPress. It’s easy to use, gives you complete control over your search results, and is more accurate than the default WordPress search.

Tags: