When it comes to WordPress theme development, one of the most important features is a search page. Whether it’s for a blog, an e-commerce site, or a business page, providing users with an intuitive and functional search experience is essential. A search page allows users to quickly find relevant content, improving site navigation and overall user experience.

In this post, we’ll walk through the process of creating a custom search page within a WordPress theme. We’ll focus on building an easy-to-use, aesthetically pleasing, and fully functional search page that integrates seamlessly with our theme’s design.

Create a New Search Template

In WordPress, creating a custom search page starts with creating a custom template. By default, WordPress uses search.php as the search template. However, if our theme doesn’t already have one, we need to create it.

Create the search.php file

In our theme’s root directory, we’ll create a new file called search.php. If the file already exists, we’ll simply edit it. This file will serve as the template for displaying search results.

<?php get_header(); ?>

<div class="search-results">
    <h1>Search Results</h1>

    <?php if ( have_posts() ) : ?>
        <ul>
            <?php while ( have_posts() ) : the_post(); ?>
                <li>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    <p><?php the_excerpt(); ?></p>
                </li>
            <?php endwhile; ?>
        </ul>

        <?php
            the_posts_pagination( array(
                'prev_text' => __( 'Previous', 'textdomain' ),
                'next_text' => __( 'Next', 'textdomain' ),
            ) );
        ?>
    <?php else : ?>
        <p><?php _e( 'Sorry, no results found.', 'textdomain' ); ?></p>
    <?php endif; ?>
</div>

<?php get_footer(); ?>

Styling the Search Results

Now that we have the basic structure in place, we need to make the search results visually appealing. We can add custom CSS to the theme’s style.css file to improve the presentation.

Enhance the Search Form

In addition to the search results page, we also need to ensure that the search form itself is user-friendly and properly integrated with our theme. WordPress provides a built-in function called get_search_form() that we can use to display a search form.

To customize the search form, we’ll edit the searchform.php file. If this file doesn’t exist in our theme, we can create it.

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label>
        <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label', 'textdomain' ); ?></span>
        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder', 'textdomain' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
    </label>
    <button type="submit" class="search-submit"><?php echo esc_html( 'Search' ); ?></button>
</form>

Customize Search Results Query (Optional)

Sometimes, we may need to customize the way search results are displayed. For example, we might want to prioritize certain content types (like pages, posts, or custom post types) or modify the query to exclude specific categories.

We can do this by hooking into the pre_get_posts action.

function custom_search_query( $query ) {
    if ( $query->is_search() && !is_admin() ) {
        $query->set( 'cat', '-5' ); // Exclude category with ID 5
    }
}
add_action( 'pre_get_posts', 'custom_search_query' );

Conclusion

Creating a custom search page for a WordPress theme is an essential step in providing an enhanced user experience. By following these steps—creating the search template, styling the results, customizing the search form, and optionally refining the search query—we can offer users a seamless and visually appealing way to find content on our site.