May 03, 2024

Custom Search Form in WordPress (Without Plugin)

A search form on a website allows visitors to quickly find specific content without navigating through multiple pages or menus. Learn how to create a search form in WordPress without a plugin.

Custom Search Form in WordPress

A WordPress search form enhances the user experience by allowing visitors to discover content on a website without going through different pages manually. A search form becomes especially useful for large websites that contain a high volume of content, such as articles, products, or books. In this post, we will create a WordPress search form without using any plugin and use the default search page.

 

Add a WordPress Search Form without a Plugin (searchform.php)

In WordPress, it is easy and simple to add a search form using the get_search_form() function. This search form can be modified by creating a file searchform.php in the active theme's folder. To display search results, WordPress has a default search page template search.php, which is used to display filtered search results. We will create a searchform.php to add a WP custom search form presented with a search input field and a submit button. The searchform.php file allows us to override the default WordPress search form markup with customized styling

searchform.php

<form action="<?= home_url(); ?>" class="form-inline search-form">
    <div class="input-group w-100">
        <input type="text" name="s" value="<?php the_search_query(); ?>" class="form-control search-input" placeholder="<?php _e('Search...', 'text-domain')?>" >
        <span class="input-group-append">
            <button class="btn btn-success search-btn" type="submit">
                <i class="fa fa-search"></i>
            </button>
        </span>
    </div>
</form>

Now all we need to do is load this search form using the function get_search_form() as shown in the code snippet below:

<?php get_search_form(); ?>
 

How to Display Search Results in WordPress (search.php)

To display search results after a visitor has submitted the form, we will use the search.php template of WordPress. It is a default template that is used to display search results. The code snippet below will show search results in the following order:

  • Show the WordPress search form on top of search results.
  • Check if the search query has posts.
  • Loop through each post and display it as a bootstrap card.
  • Show pagination for search results.
  • Show a message alert if there are no posts found for the given search term.

search.php

<?php get_header(); ?>

    <section class="section search-results py-5">
        <div class="container">
            <div class="search-form mb-4">
                <?php get_search_form(); ?>
            </div>

            <?php if (have_posts()): ?>
                <h1 class="mb-4"><?php _e('Search Results for', 'text-domain') ?>: "<?= get_search_query(); ?>"</h1>

                <div class="search-result-list">
                    <?php while (have_posts()): the_post(); ?>
                        <div class="card mb-4">
                            <div class="card-header">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </div>
                            <div class="card-body">
                                <?php the_excerpt(); ?>
                            </div>
                        </div>
                    <?php endwhile; ?>
                </div>
                <div class="pagination">
                    <?php
                    the_posts_pagination([
                        'mid_size' => 2,
                        'prev_text' => __('Previous', 'text-domain'),
                        'next_text' => __('Next', 'text-domain'),
                    ]);
                    ?>
                </div>
            <?php else: ?>
                <div class="alert alert-danger">
                    <?php _e('No results found for', 'text-domain') ?>: "<?= get_search_query(); ?>"
                </div>
            <?php endif; ?>
        </div>
    </section>

<?php get_footer();
 

How to Filter WordPress Search Results (pre_get_posts)

The search form will by default, look for all registered post types to match the search query. This default behavior can be customized by using a WordPress pre_get_posts hook to limit search results to specific posts or pages. This hook can be added to the functions.php file.

// Add filter to posts query for search results
add_filter('pre_get_posts', 'custom_search_filter');
function custom_search_filter($query)
{
    if (!is_admin() && $query->is_search) {
        $query->set('post_type', ['post', 'property', 'book', 'page']);
    }

    return $query;
}

We demonstrated how a custom WP search form can be added in WordPress using the default search template. In this post, we used bootstrap classes and displayed search results in bootstrap cards. You can modify the search results page and use template parts based on each post type.

Home