Pagination URL not good

Question

It looks like you’ve attempted to replace the default WP_Query object for your search page by instantiating a new WP_Query object. This has two main effects: firstly you’re hitting the database twice completely unnecessarily, slowing down the page execution; and secondly default template functionality like pagination depends on the default query for the page rather than the one you’ve run, so things break in unexpected ways.

What you’ve done there should only ever be used to add a supplementary loop to the page, it can’t replace the default loop.

Remove this:

$args_booking = array(
    'posts_per_page' => 2,
    'post_type' => 'post',
    'paged' => get_query_var('paged') ? get_query_var('paged') : 1
);

$query = new WP_Query($args_booking);

The correct way to override a default query is by hooking to pre_get_posts in your theme’s functions.php and altering it before it’s sent to the DB.

/**
 * Override search query parameters
 * 
 * @param object $query An instance of WP_Query
 */
function wpse_424907( $query ) {
  if( $query-> is_main_query() && $query->is_search() ) {
    $query->set( 'posts_per_page', 2 );
    $query->set( 'post_type', 'post' );
    return;
  }
}

add_action( 'pre_get_posts', 'wpse_424907', 1 );

Your pagination is explicitly referring to $wp_query rather than the query you ran above, which is assigned to $query.

It would be a good idea to abstract the pagination into another function so you’re not repeating the same logic in all your templates:

  /**
   * Echo pagination. If used with a custom query, it needs to be passed as an argument. Otherwise it assumes the default $wp_query
   * 
   * @param object $query An instance of WP_Query
   */
  function paginate($query = '') {
    if (!($query instanceof WP_Query)) {
      global $wp_query;
      $query = $wp_query;
    }
    if ($query->max_num_pages > 1) {
      $current_page = max(1, get_query_var('paged'));
      echo '<nav class="pagination">';
      echo paginate_links(array(
          'base' => get_pagenum_link(1) . '%_%',
          'format' => 'page/%#%',
          'current' => $current_page,
          'total' => $query->max_num_pages,
          'prev_text' => '‹',
          'next_text' => '›'
      ));
      echo '</nav>';
    }
  }

(Semantically, pagination should be a <nav> element).

That should also go in your functions.php so you can call it in other templates. Here’s what your search template should look like now:

<?php get_header(); ?>

<div class="wapper">
  <div class="contentarea clearfix">
    <div class="content">
      <h1 class="search-title"> <?php echo $wp_query->found_posts; ?>
        <?php _e( 'Search Results Found For', 'locale' ); ?>: "<?php the_search_query(); ?>" </h1>

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

            <ul>
                <?php while ( have_posts() ) { the_post(); ?>
                <li>
                    <h3><a href="<?php echo get_permalink(); ?>">
                    <?php the_title(); ?>
                    </a></h3>
                    <?php the_post_thumbnail('medium') ?>
                    <?php echo substr(get_the_excerpt(), 0,200); ?>
                    <div class="h-readmore"> <a href="<?php the_permalink(); ?>">Read More</a></div>
                </li>
                <?php } ?>
            </ul>
            <?php paginate(); ?>

    </div>
  </div>
</div>
<?php get_footer(); ?>

Since WordPress doesn’t prettify search URLs by default, we’ll also need to add a filter for that to functions.php:

/**
* Prettify the search permalinks
* 
* @return void
*/
function wpse_424907_search_url_rewrite() {
  if ( is_search() && ! empty( $_GET['s'] ) ) {
    wp_redirect( home_url( "/search/" ) . urlencode( get_query_var( 's' ) ) );
        exit();
  } 
}
add_action( 'template_redirect', 'wpse_424907_search_url_rewrite' );

Related Posts: