How to Add a Search Bar to WordPress Using Shortcode

Adding a custom search functionality to your WordPress blog enhances user experience by allowing visitors to find content more easily. This guide will walk you through creating a custom search.php file, a searchform.php file, and styling the search form for your WordPress theme.

Step 1: Create a search.php File

The search.php file is used to display search results when a user performs a search.

<?php
/**
 * The template for displaying search results.
 *
 * @package YourThemeName
 */

get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

        <header class="page-header">
            <h1 class="page-title">
                <?php printf( esc_html__( 'Search Results for: %s', 'your-theme' ), '<span>' . get_search_query() . '</span>' ); ?>
            </h1>
        </header>

        <?php if ( have_posts() ) : ?>

            <div class="search-results-list">
                <?php
                while ( have_posts() ) :
                    the_post();
                ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                        <header class="entry-header">
                            <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        </header>
                        <div class="entry-summary">
                            <?php the_excerpt(); ?>
                        </div>
                    </article>
                <?php endwhile; ?>
            </div>

            <?php the_posts_navigation(); ?>

        <?php else : ?>

            <div class="no-results">
                <h2><?php esc_html_e( 'No results found', 'your-theme' ); ?></h2>
                <p><?php esc_html_e( 'Please try a different search term.', 'your-theme' ); ?></p>
            </div>

        <?php endif; ?>

    </main>
</div>

<?php get_footer(); ?>

Step 2: Create a searchform.php File

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <div>
        <label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'your-theme' ); ?></label>
        <input type="text" name="s" id="s" placeholder="Search blogs..." value="<?php echo get_search_query(); ?>" />
        <input type="hidden" name="post_type" value="post" />
        <button type="submit" id="searchsubmit"><?php _e( 'Search', 'your-theme' ); ?></button>
    </div>
</form>

Step 3: Add the Search Form to Your Theme

<?php get_search_form(); ?>

Step 4: Style the Search Form

.searchform {
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 600px;
    margin: 20px auto;
}

.searchform input[type="text"] {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

.searchform button#searchsubmit {
    background-color: #ec713c;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    text-transform: uppercase;
}

.searchform button#searchsubmit:hover {
    background-color: #d85a2b;
}

@media (max-width: 768px) {
    .searchform {
        flex-direction: column;
    }

    .searchform input[type="text"],
    .searchform button#searchsubmit {
        width: 100%;
    }
}

Step 5: Add the below code in function.php (Theme_folder->function.php)

function custom_search_shortcode() {
    ob_start();
    get_search_form();
    return ob_get_clean();
}
add_shortcode( 'custom_search', 'custom_search_shortcode' );

Use the shortcode [custom_search] in your WordPress page/post to display the search form.

Step 6: Test the Search Functionality

Visit your WordPress site, perform a search, and verify that the results are displayed correctly.