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 default search page.

 

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

In WordPress it is easy and simple to add a search form using get_search_form() function. This search form can be modified by creating a file searchform.php in 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 code snippet below:

<?php get_search_form(); ?>
 

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

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

  • Show WordPress search form on top of search results.
  • Check if 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 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)

Search form will, by default, look for all registered post types to match with 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 in 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 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