Normal WP pagination broken if SF is used on the same page

Anonymous

#204212

So I’m working on a site for a client who wants to have a search form that pops up in an overlay if toggled. Also the results are shown in this overlaying div-element. I’ve configured the search form to use Ajax and Infinite Scroll, everything works just fine.

The problem is that if I’m on a page that has a query that goes like this:

<?php
      $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
      $query = new WP_Query(array('cat' => 2, 'posts_per_page' => 20, 'paged' => $paged));
      if ($query->have_posts()) {
        while ($query->have_posts()) { 
          $query->the_post();
          get_template_part('templates/news-item', get_post_format()); 
        }
        if ($query->max_num_pages > 1) { ?>
          <nav class="prev-next-posts">
            <div class="next-posts-link"> 
              <?php echo get_previous_posts_link( '<- Newer' ); ?>
            </div>
            <div class="prev-posts-link">
              <?php echo get_next_posts_link( 'Older ->', $query->max_num_pages ); ?>
            </div>
          </nav>
        <?php 
        }
        wp_reset_postdata();
      } 
      else {}
    ?>

So it’s paged, as you can see, and it uses the get_next_posts_link and get_previous_posts_link to display the prev/next buttons.

Normally these links have urls like site.com/foo/page/2/, but now they are turned into site.com/path/to/searh/page?sf_paged=2. And that of course does not work and it’s not how it should be anyway.

I use shortcode to display the search form and the results in the overlaying element. If I disable the one for the results, the pagination works again. But the search of course does not 🙂

What could cause this behavior? I’ve been mostly developing under Drupal for years, so this might be a simple WP thing I’m missing here…

Trevor

#204229

These links, they are not from the section that has the results, or they ARE from the section (overlay) that has the results?

In our settings in the form, on the Display Results settings tab, if you have Ajax ON, you can set the pagination container. It is normally set to .pagination a

Let us say that the overly is in a div with the class of overlay, then you might change the pagination selector to .overlay .pagination a

Anonymous

#204554

Thanks for your reply.

The links are not from the search results (overlay), they are from the other pagination that’s on a page. And that pagination should not use anything from S&F.

I tried your suggestion, but it did not help. So using “infinite scroll” or “normal” as the pagination type makes no difference, no matter how I set the classes for the containers/selectors.

This is the results.php that I’m using (with infinite scroll on):

<?php

if ( $query->have_posts() )
{
	?>
	<div class='search-filter-results-list'>
	<?php
		while ($query->have_posts())
		{
			$query->the_post();
			?>
			<div class='search-filter-result-item'>
				<h2><?php the_title(); ?></h2>
				<p><?php echo search_excerpt(30); ?></p>
			</div>
			<?php
		}
	?>
	</div>
<?php
}
else
{
	?>
	<div class='search-filter-results-list' data-search-filter-action='infinite-scroll-end'></div>
	<?php
}
?>

Although I don’t think that’s where the problem is, as I tried the core ones that come with this plugin and the problem still exists.

On the S&F settings page I have set “Infinite Scroll Container” to .search-overlay .search-filter-results-list. Ajax is on, bookmarking is on..

And this is the way the overlay is created on every page:

<div class="search-overlay">
  <div class="search-content">
    <div class="search-toggle search-toggle-close">
      <img src="URL-TO-IMG" width="54" height="34" />
    </div>
    <div class="search-input">
      <?php echo do_shortcode('[searchandfilter id="2947"]'); ?>
    </div>
    <div class="search-results">
      <?php echo do_shortcode('[searchandfilter id="2947" show="results"]'); ?>
    </div>
    <?php if ( is_active_sidebar( 'nav_bottom_nineteen' ) ) : ?>
      <div class="widget-area nav-main-bottom" role="complementary">
        <?php dynamic_sidebar( 'nav_bottom_nineteen' ); ?>
      </div>
    <?php endif; ?>
  </div>
</div>

Trevor

#204669

The loop you showed me in the opening post, that is on the page in addition to our search results loop? If, yes, have you tried using a different query array name, other than $query? We also use that same array name.

Anonymous

#204801

I tried it now, but it makes no difference. I was pretty sure that would do it!

Maybe this should be tested on a clean install to see if it’s a theme issue or a conflict between two plugins..

Trevor

#204807

Starting/testing on a clean install, slowly adding things till it breaks, is the best approach, yes.

Anonymous

#204967

Ok, to this is what I did:

1. Clean install of WordPress 5.1.1
2. Created a couple of articles to test the pagination

Now if I go to the front page that shows the articles and the default pagination for them, it works like it should. So I continue:

3. Installed the newest version of Search & Filter Pro
4. Configured a search form that uses a shortcode, ajax and infinite scroll
5. Put the form and its results to the default theme’s header.php using do_schortcode()

Now the default pagination does not work for the article pagination, it just adds ?sf_paged=2 to the url. The pagination for the search results work as it should.

Anonymous

#204969

This reply has been marked as private.

Trevor

#205004

This reply has been marked as private.

Anonymous

#205006

This reply has been marked as private.

[Author]

Posts