Jetpack Infinite Scroll on Frontier Theme

Adding Jetpack Infinite Scroll to Theme

Frontier Theme is not really designed to support Jetpack’s Infinite Scroll feature. I also don’t think Infinite Scroll would be a good match to Frontier Theme visually. But if you really must have the feature enabled then there is a way to do it. You must have Jetpack plugin.

First, you’ll need to use a Child Theme. You can download one pre-made for Frontier here.

Child Theme Functions.php

Now, open your Child Theme’s functions.php then add this:

function frontier_infinite_scroll_init() {
	add_theme_support( 'infinite-scroll', array(
	     'type'		=> 'scroll',
	     'container' 	=> 'content',
	     'footer' 		=> 'main',
	     'render' 		=> 'frontier_infinite_scroll_render',
	     'posts_per_page' 	=> 3,
	) );
}
add_action( 'after_setup_theme', 'frontier_infinite_scroll_init' );


function frontier_infinite_scroll_render() {  
?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

	<?php if ( !is_singular() ) : ?>
	     <?php get_template_part( 'loop', 'blog' ); ?>
	<?php else : ?>
	     <?php get_template_part( 'loop', 'single' ); ?>
	<?php endif; ?>

<?php endwhile; endif; ?>

<?php
}

The Type property on the function above accepts either Scroll or Click. Choosing Click produces a button underneath the bottom-most post. The property posts_per_page sets how many post to show per scroll or per click. Setting this to 1 when the Type is set to Scroll seems to be optimal.

You might also want to hide the default navigation since you would not need it while using Infinite Scroll. Add this on Frontier Options -> Custom CSS

.blog-nav {display: none;}

That’s it. If it doesn’t seem to work then check Jetpack plugin’s settings to verify that the Infinite Scroll feature is enabled.

Share This Post :

4 Comments

Add a Comment
  1. Nice I like It

    Thanks You bro

  2. Hi Ron,

    I have added this code to my child theme’s functions.php, and now infinite scroll works for the front page, but not for single posts. Could you help in sorting out this issue?

    Thanks!

    1. It’s supposed to work that way. Infinite scroll is a way to show multiple posts but since single pages only contain one entry/article there would be no need to hide anything else.

      1. Ah, that does makes sense. Thank you!

Leave a Reply

Anything that resembles spam is deleted. Keyword names are also changed or deleted.

Note: When posting code, enclose it in pre and code tags.
e.g. <pre><code> Add code here </code></pre>

ronangelo © 2012 - 2016 Frontier Theme
css.php