Ask your WordPress questions! Pay money and get answers fast! (more info)

Get infinite scroll working on page with multiple custom queries WordPress

  • REFUNDED

I have a home page on my site that has 3 queries.

The code is here:

[[LINK href=" https://gist.github.com/slambert/7724916"]]
https://gist.github.com/slambert/7724916[[/LINK]]

and the page is here:

[[LINK href="http://visitsteve.com"]]http://visitsteve.com[[/LINK]]

The first query is for "featured" content.

The second is for recent content in a specific category.

The last is for posts in the news category. Right now it shows 10 posts. I'd like to change it so it shows 5, but enable infinite scroll on that one.

This is the version of the plugin I am using:
http://www.infinite-scroll.com/

I have heard this can be done with multiple/custom queries by using specific kind of query/loop, but it's a bit over my head and I don't have time to decipher it.

I tried it with the code I posted and the loading gif appears, but it says it can't load any posts

Answers (3)

2013-11-30

Sabby Sam answers:

Hi Steve,
Did you read the FAQS here
http://www.infinite-scroll.com/
It should be pretty easy and I suggest you to check if you are getting any jquery error.
Try one more time or else give me access I will try.

Thanks


Steve Lambert comments:

I'm not getting a jQuery error, it just shows the loading gif and then "no additional entries"


Sabby Sam comments:

You need to check the error in console of inspect element.


Steve Lambert comments:

I see that there are some warnings, but not errors. Unfortunately, I don't know what to do with the warnings anyway. See Ryan S.'s post below. From what I understand, this is closer to what is causing the issue.

2013-11-30

Fahad Murtaza answers:

Hi Steve

I guess having multiple loops shouldn't even make any difference in your case. You just need to do settings like


// infinitescroll() is called on the element that surrounds
// the items you will be loading more of
$('#content').infinitescroll({

navSelector : "div#nav-below",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#nav-below a:last",
// selector for the NEXT link (to page 2)
itemSelector : "#content"
// selector for all items you'll retrieve
});



Steve Lambert comments:

The selectors work. It's just not finding more posts.


Fahad Murtaza comments:

Can you please create a gist from the code of the page which generates this page

http://visitsteve.com/category/news/page/2/

I believe its category.php


Fahad Murtaza comments:

I think I know why

http://visitsteve.com/page/2/

is redirecting to

http://visitsteve.com/category/news/page/2/


Steve Lambert comments:

I did that so that it would continue to show people news posts. With infinite-scroll I suppose I wouldn't need it anymore.

This is the category.php file:
https://gist.github.com/slambert/7734845

2013-12-01

Ryan S answers:

I can't find any jQuery conflict in the site above and after reviewing your code I found that you're uses query_posts() which really not recommended getting or feching datas, the reason is this code overwrite default query

so I suggest using this one instead, in your case


$args = array(
'tag' => 'featured'
'posts_per_page' => 8
);

// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {

while ( $the_query->have_posts() ) { $the_query->the_post();

// display data here

}

} else {
// no posts found
}


/* Restore original Post Data */
wp_reset_postdata();


Hope that helps


Steve Lambert comments:

Ryan, this is what I suspected, but can you incorporate this into the home.php file I posted so that all 3 queries and the infinite scroll will work?


Ryan S comments:

I don't know where to add response in your reply

here's the updated code let me know if you have issue

<!-- I recomment using front-page.php instead, home.php overwrite static page so it's not a good choice except if you ignore static page -->
<?php get_header() ?>

<div id="home-banner">
<?php putRevSlider("tsleadin") ?>
</div><!-- #home-banner-->

<div id="home-container">

<div id="home-feature">
<h1>Featured Work</h1>

<?php
$args = array(
'tag' => 'featured',
'posts_per_page' => 8
);

// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {
?>
<ul class="work-list">
<?php while ( $the_query->have_posts() ) { $the_query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php
#If there is a post thumbnail , it will display. If not it is the thumb function. These
# can be edited in the functions.php file.

if( has_post_thumbnail() )
the_post_thumbnail();
else
the_excerpt();

?>
</a>
<a href="<?php the_permalink(); ?>"><span class="title"><?php the_title(); /*adding the title*/ ?></span></a>
</li>
<?php } ?>
</ul>
<?php } ?>
</div><!-- #home-feature-->

<div id="home-about">
<h1>About Steve</h1>
<!-- snip
SOME TEXT GOES HERE…
-->
</div><!--#home-about-->


<div id="home-work">
<h1>Recent Work</h1>

<?php
$args2 = array(
'cat' => 9,
'posts_per_page' => 8
);

// The Query
$work_query = new WP_Query( $args2 );

// The Loop
if ( $work_query->have_posts() ) {
?>
<ul class="work-list">
<?php while ( $work_query->have_posts() ) { $work_query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php
#If there is a post thumbnail , it will display. If not it is the thumb function. These
# can be edited in the functions.php file.

if( has_post_thumbnail() )
the_post_thumbnail();
else
the_excerpt();
?>
</a>
<a href="<?php the_permalink(); ?>"><span class="title"><?php the_title(); ?></span></a>
</li>
<?php }; ?>
</ul>
<?php }; ?>
</div><!-- #home-work-->

<div id="home-loop">
<h1>Recent News</h1>

<?php get_sidebar() ?>
<div id="content">

<?php
$args3 = array(
'cat' => 1,
'posts_per_page' => 10
);

// The Query
$news_query = new WP_Query( $args3 );

// The Loop
if ( $news_query->have_posts() )
{
while ( $news_query->have_posts() ) { $news_query->the_post();
?>
<div id="post-<?php the_ID(); ?>" class="post">
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<div class="date"><?php the_date(); ?></div>
<div class="meta"><?php _e(""); ?> <?php edit_post_link(); ?></div>

<div class="storycontent">
<?php the_content('Read on...'); ?>
</div><!-- .storycontent -->

<div class="horiz-bar">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/end-post.gif" height="2" width="162" alt="--" />
<?php wp_link_pages(); ?>
</div><!-- .horiz-bar -->
</div><!-- #post-<?php the_ID(); ?> .post -->
<?php
}
}
?>
<div id="nav-below">
<div class="center">
<?php posts_nav_link(' || ', __('&laquo; Previous'), __('Next &raquo;')); ?>
</div><!-- #center -->
</div><!--#nav-below"-->
</div> <!-- #home-loop -->
</div><!--#content-->

<?php get_footer(); ?>


Steve Lambert comments:

Hi Ryan, I loaded up your code and it's running. Everything displays correctly, but I still get "No additional posts." after the loading gif appears.


Ryan S comments:

Okay then we have to trouble things out

1. update navigation to

<div class="navigation">
<?php previous_post_link('%link', '%title', FALSE); ?>
<?php next_post_link('%link', '%title', FALSE); ?>
</div>


and make sure you follow these instructions

Content CSS Selector
The DIV that wraps around all posts. New posts will be inserted at the bottom of this DIV.

Post CSS Selector
The selector that selects all posts on a page. Each post must be surrounded by a single DIV.

Navigation links CSS Selector
This DIV contains the Next Posts and Previous Posts link.

Previous Posts CSS Selector
This A tag is what points to the 2nd page of posts.


Steve Lambert comments:

When I made that change it showed the post titles at the bottom of the page, but no loading gif and no next page of posts.

I am uploading the settings I am using as a screenshot.

Looking forward…