Theme features. Jetpack Infinite Scroll

Themes features. Jetpack Infinite Scroll Cover

Jetpack and almost all it’s modules works fine right from the box. But some of modules requires additional preparation and developer skills. And today I’ll show you which issues may happened with Infinite Scroll module.

This module is great because it cares about Google Analytics page views and enqueue additional CSS and JS files which can appear on the 2nd or 3rd page. In my personal opinion conditional CSS and JS files is not best way how you can solve your problems with site but in some cases it may helpfull.

Another key point is that this plugin (Jetpack) is pretty popular and probability of usage is high. And your users don’t need to install additional “unstrusted” plugins from somewhere. Less dependencies is great.

Here is a short list of all pluses of usage this. This is the reasons why this solution is better than other similar plugins.

  1. Google Analytics support.
  2. Supporting conditional CSS + JS on different pages.
  3. Supporting URL. When you click “load more” the url of page is updated and you can start from this page on your iPhone after surfing at desktop in Safari (like Continuous in native macOS apps).
  4. Backward capability. If user viewing site without JS then default pagination will completely work.
  5. Popular plugin.
  6. Easy to setup.

Before you start it’s highly recommended read official docs which contains answers to many questions but not all. This can be your start point. And basically all you need to do: declare that your theme support this module.

add_theme_support( 'infinite-scroll', array(
  'container' => 'main'
) );

Sometimes this is not work. Even in new WordPress official theme Twenty Seventeen (2017) it doesn’t work (and this is not a bug).

As a Theme Developer you may confront with different issues while prepare support of this module. in this article I wish focus on one of them which happens in Twenty Seventeen and puts many developers in a deadlock.

Issue

Let’s describe our issue as short as possible. The button with “load more” caption shows on the page but then you clicking it simply outputs nothing (posts from 2nd page not loading).

Solution

Debugger is the best friend. Isn’t it? Before you start to debug you need to figure out where actually all of this happens. In Jetpack’s case this is not easy. So all I can say is — experience (knowledges) helps.

Buggy code can be founded in render function.

function render() {
  while ( have_posts() ) {
    the_post();
    get_template_part( 'content', get_post_format() );
  }
}

When Jetpack trying render the posts it calls this function by default. And if your theme doesn’t content any content*.php in theme root folder — then you can watch this “bug”.

And the easiest solution is create our own render function and use it. For example, if your content*.php templates located in your-theme-name/templates/ folder:

add_theme_support( 'infinite-scroll', array(
  'container' => 'main',
  'render' => 'your_theme_jetpack_infinite_scroll_render'
) );

And your your_theme_jetpack_infinite_scroll_render should looks like (notice templates part of path):

function your_theme_jetpack_infinite_scroll_render() {
  while ( have_posts() ) {
    the_post();
    get_template_part( 'templates/content', get_post_format() );
  }
}

Other aspects

Next issue which you can recognize is that you need to repeat all your logic of choosing template parts twice: in your PHP templates and in render function declared specially for Jetpack. If you have different hardcoded templates for categories, tags, home, search and other pages this can be hard to maintain.

To solve this you can create only one function which will be choose template parts and use it directly in templates and also pass it to Jetpack. To illustrate this here is my page.php from one of my themes.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s