Wednesday 17 February 2016

php - Can't get Jetpack Infinite Scroll working in custom WordPress theme

I'm making a custom WordPress site for a client in which I would like to implement Infinite Scrolling to my archive and category templates.



I'm using the following to achieve that:




  • HTML5Blank WordPress Framework

  • Jetpack WordPress Plugin

  • Bootstrap 3




I've read several posts and tutorials over the Internet explaining how to implement that functionality, everything seems super straightforward but for any reason I'm not being able to make it to work.



The plugin is activated, and also activated the Infinite Scroll module of it.



I'm following the instructions as written here: http://ottopress.com/2012/jetpack-and-the-infinite-scroll/



I have the following piece of code in my category.php (where I'm making all of my tests), please note that everything is wrapped in a div with the id "content":







// Start the Loop.
while ( have_posts() ) : the_post();

get_template_part( 'content', 'category' );

// End the loop.
endwhile;


// If no content, include the "No posts found" template.
else :
get_template_part( 'content', 'none' );

endif;
?>



Then I created a content-category.php file where I have my actual posts markup (nothing out of this world here):







Everything shows ok in the frontend, the tricky part comes next, when I actually add the Infinite Scrolling support to my theme via functions.php:




function raramuri_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'type' => 'click',
'footer' => false,
));
}
add_action('init', 'raramuri_infinite_scroll_init');



I have tried several things such as:




  • Adding the 'render' parameter, and trying to load the template part
    get_template_part( 'content', 'category' );

  • Using both "click" and "scroll" in the 'type' parameter

  • Adding the Infinite Scroll support via a custom function (just the
    way I did above) and also by just adding add_theme_support in the
    functions block of my functions.php

  • Tried pretty much every custom parameter of the Infinite Scroll

    function (trial and error)



By this point nothing have worked, I don't see a "loading gif icon" when scrolling down nor a "Show more posts" button when using the click version.



I think it may be some incompatibility with HTML5Blank or I'm not implementing the infinite scroll support the right way.



I would like to have the "Show more posts" button so that the users could load more most as they wish.



Am I missing something? Thanks in advance for your help!

No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...