Creating a Bootstrap WordPress Theme (Part 5) – Search Form & Results

In this tutorial, we’ll show you how to use Bootstrap to integrate a search form on your WordPress site, and design a user-friendly search results page.

This is part 5 in the How to Create a Bootstrap WordPress Theme series.

• Part 1 – Loading Bootstrap & Font Awesome CSS & javascript
• Part 2 – Using Bootstrap dropdowns for your WordPress navigation
• Part 3 – Using Bootstrap to create a sticky footer
• Part 4 – Bootstrapped Layout: Pages, posts & sidebar
• Part 5 – Bootstrap search form & search results pages
• Part 6 – Bootstrap comments section

SEE ALSO: WordPress Bootstrap Themes for 2016

Display the Search Form

Let’s use Bootstrap’s form styles to enhance the default WordPress search form.

We place the following code in our searchform.php file. But first, let me explain what we’re doing here.

• Once a user has performed a search, we’re storing the keywords in a variable called $search_terms. We use this to keep those words in the search form on the results page. This mimics Google’s search result page, and makes it easier to modify keywords.
• We hide the “Search” label by using the .sr-only class (only for screen readers)
• If search terms have been entered, we display them as the value in the <input> field
• We use Font Awesome’s search icon on our search submit button

<?php $search_terms = htmlspecialchars( $_GET["s"] ); ?>

<form role="form" action="<?php bloginfo('siteurl'); ?>/" id="searchform" method="get">
    <label for="s" class="sr-only">Search</label>
    <div class="input-group">
        <input type="text" class="form-control" id="s" name="s" placeholder="Search"<?php if ( $search_terms !== '' ) { echo ' value="' . $search_terms . '"'; } ?> />
        <span class="input-group-btn">
            <button type="submit" class="btn btn-primary"><i class="icon-search"></i></button>
        </span>
    </div> <!-- .input-group -->
</form>

Search Results Page

The search.php template powers your search results page. Let’s use Bootstrap to style the results, and some WordPress functions to give the user feedback on what they searched for.

[adrotate group=”8″]

Display Number of Search Results Found

Before we output anything on the page, let’s get the number of results & store it in a variable (called $results_count). This code should be placed at the top of your search.php file:

<?php // Get number of results
$results_count = $wp_query->found_posts;
?>

Search Terms & Number of Results

We’re using Bootstrap’s Jumbotron to display the search terms & number of results, as well as display the search form again, in case the user wants to modify their search.

• the_search_query() function displays the search terms
• We check to see if there are results. For no results, we display a .label-danger with “No Results”. If there are results, we display a .label-success with the number of results found.
• We display the search form using get_search_form()

This code should be placed in your search.php file:

<div class="jumbotron">
    <div class="container">
        <h1>Search <span class="keyword">&ldquo;<?php the_search_query(); ?>&rdquo;</span></h1>
        <?php if ($results_count == '' || $results_count == 0) { // No Results ?>
            <p><span class="label label-danger"><?php _e('No Results'); ?></span>&nbsp; <?php _e('Try different search terms.'); ?></p>
        <?php } else { // Results Found ?>
            <p><span class="label label-success"><?php echo $results_count . __(' Results'); ?></span></p>
        <?php } // end results check ?>
        <div class="row">
            <div class="col-md-3">
                <?php get_search_form(); ?>
            </div>
        </div>
    </div> <!-- .container -->
</div> <!-- .jumbotron -->

Search Results Loop

Now we need to display the actual results. We’ll run a WordPress loop to include each search result that gets returned.

• If results are found, we’ll display them on the page
• If no results are found, we’ll display a list of recent posts, alongside a list of all static pages on the site. You might want to customize these, but for a generic solution, we believe this is much more useful than just saying, “Sorry. No results found.”

This code should be placed in your search.php file:

<div class="container" id="main">
    <div class="row">
        <div class="col-md-8">
            <?php if (have_posts()) : // Results Found ?>

                <h1><?php _e('Search Results'); ?></h1>
                <?php while (have_posts()) : the_post(); ?>

                <article <?php post_class(); ?>>
                    <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                    <div class="entry">
                        <p><?php echo wp_trim_words( get_the_excerpt(), 30, '...' ); ?></p>
                    </div>
                </article>
                <hr />

                <?php endwhile; ?>

                <ul class="pager">
                    <li><?php next_posts_link('<i class="icon-chevron-left"></i>&nbsp; Older Results') ?></li>
                    <li><?php previous_posts_link('Newer Results &nbsp;<i class="icon-chevron-right"></i>') ?></li>
                </ul>

            <?php else : // No Results ?>

                <p><?php _e('Sorry. We couldn&rsquo;t find anything for that search. View one of our site&rsquo;s pages or a recent article below.'); ?></p>
                <div class="row">
                    <div class="col-md-6 posts">
                        <h3><?php _e('Recent Articles'); ?></h3>
                        <ul>
                            <?php
                                $args = array(
                                    'numberposts' => '10',
                                    'post_status' => 'publish'
                                );
                                $recent_posts = wp_get_recent_posts( $args );
                                foreach( $recent_posts as $recent ) {
                                    echo '<li><a href="' . get_permalink($recent["ID"]) . '">' . $recent["post_title"] . '</a></li>';
                                }
                            ?>
                        </ul>
                    </div> <!-- .posts -->
                    <div class="col-md-6 pages">
                        <h3><?php _e('Page Sitemap'); ?></h3>
                        <ul>
                            <?php wp_list_pages('title_li=&sort_column=menu_order'); ?>
                        </ul>
                    </div> <!-- .pages -->
                </div> <!-- .row -->

            <?php endif; ?>

        </div> <!-- .col-md-8 -->

        <?php get_sidebar(); ?>

    </div> <!-- .row -->
</div><!-- .container -->

Next up: Part 6 – Bootstrap comments section