WordPress Search template

search.php

<?php
// Get the header
get_header();

// Results pagination offset
$offset = ($_GET["offset"] ? $_GET["offset"] : 0);

// load the global query ++ the global searched keyword
global $wp_query, $s;

// get query params
$found_posts = $wp_query->found_posts;
$ppp = $wp_query->query_vars["posts_per_page"];
$total_pages = $wp_query->max_num_pages;
?>

<!-- Display searched word to user -->
<p class="intro">Your search for '<?php echo $s; ?>' found the following results.</p>

<!-- If there are posts returned from the query -->
<?php if ( have_posts() && !empty($s)): ?>

    <!-- Display how many results were returned -->
    <?php if ($found_posts > 10): ?>
        <p><strong><?php echo $offset+1; ?> to <?php echo $offset+$ppp; ?> of <?php echo $found_posts; ?> results</strong></p>
    <?php else: ?>
        <p>Showing <strong><?php echo $found_posts; ?> result(s)</strong></p>
    <?php endif; ?>
    
    <?php while ( have_posts() ): the_post(); ?>

        <article>
                        
            <a href="<?php the_permalink(); ?>" class="search-results__link">
                <h2><?php the_title(); ?></h2>
                <p><?php the_permalink(); ?></p>
            </a>

            <?php if(get_the_excerpt()): ?>
                <p class="search-results__content">
                    <?php echo get_the_excerpt(); ?>
                </p>
            <?php endif; ?>

        </article>

    <?php endwhile; ?>

    <section class="search-pagination">
    
        <div class="grid">
    
            <!-- Previous Results Page -->
            <div class="grid__cell  unit-4-12">
    
                <?php if ($offset): ?>
                    <a href="<?php echo esc_url( add_query_arg( 'offset', $offset-$ppp ) ); ?>" class="btn--prev  |  search-pagination__prev">Previous Page</a>
                <?php else: ?>
                    <span class="btn--prev  |  search-pagination__prev  search-pagination--disabled">Previous Page</span>
                <?php endif; ?>
    
            </div>
    
            <!-- Pagination -->
            <div class="grid__cell  unit-4-12">
                
                <ol class="search-pagination__list">
                <?php for ($i = 1; $i <= $total_pages; $i++) : ?>
                    <li class="search-pagination__list__item">
                        <a href="<?php echo esc_url( add_query_arg( 'offset', ($i*10)-10 ) ); ?>" class="<?php echo ((($i*10)-10) == $offset ? "search-pagination__link--disabled" : ""); ?>  search-pagination__link"><?php echo $i; ?></a>
                    </li>
                <?php endfor; ?>
                </ol>
    
            </div>
    
            <!-- Next Results Page -->
            <div class="grid__cell  unit-4-12">
    
                <?php if ($found_posts-$offset > 10): ?>
                    <a href="<?php echo esc_url( add_query_arg( 'offset', $offset+$ppp ) ); ?>" class="btn--next  |  search-pagination__next">Next Page</a>
                <?php else: ?>
                    <span class="btn--next  |  search-pagination__next  search-pagination--disabled">Next Page</span>
                <?php endif; ?>
    
            </div>
    
        </div>
    
    </section>

<?php endif; ?>

<?php get_footer(); ?>