Tag: jetpack

Add Infinite Scroll to Your WordPress Theme Using Jetpack

Scroll Forever, Or Until There’s No More Posts

It’s no secret I’m a big fan of Jetpack. A single plugin adds so many options, not only for end users, but for we developers too! An excellent example would be infinite scroll.

Jetpack is a very popular plugin, so supporting Jetpack-specific features in your themes will end up just making your users happier. Kind of like an added bonus they didn’t realize they could use if they’re using your theme and Jetpack.

Infinite scroll is incredibly easy to add to “well-crafted” themes. The Twenty Twelve theme is a great example. Enabling infinite scroll is slightly more complicated with not-so-well-crafted themes, but it’s still pretty easy.

Enable Infinite Scroll in Well-Crafted Themes

Just add the following to your functions.php file.

add_theme_support( 'infinite-scroll', array(
    'container' => 'content',
    'footer' => 'page',
) );

Enable Infinite Scroll in Not-So-Well-Crafted Themes

Activate Infinite Scroll

Add the following to the functions.php file for your theme.

function mytheme_infinite_scroll_init() {
    add_theme_support( 'infinite-scroll', array(
        'container' => 'content',
        'render'    => 'mytheme_infinite_scroll_render',
        'footer'    => 'wrapper',
    ) );
}
add_action( 'init', 'rootdip_infinite_scroll_init' );

Setup Function for the Render Parameter

The render parameter specifies a function, in this case, mytheme_infinite_scroll_init. That function uses the WordPress loop to load additional posts to be shown for infinite scrolling.

To hook this all up, add the following to your functions.php file.

add_action( 'init', 'mytheme_infinite_scroll_init' );
function rootdip_infinite_scroll_render() {
    get_template_part( 'loop' );
}

In mytheme_infinite_scroll_init, the ‘loop’ parameter value defines the file where your wordpress loop sits. It should be very basic and only contain markup and PHP you want to be included with every post. Have a look at the loop.php file from Rootdip for an example.

That’s It

There’s more options that you can play with that are described on the Jetpack Infinite Scroll page, such as styling specifics and JavaScript events.

That’s really all there is to it. With the above code you’ll have a working Jetpack Infinite Scroll in your WordPress theme. Whether you’ve got a well-crafted theme or not, you should be able to add infinite scroll via Jetpack fairly easily.

I’d suggest adding an option to your theme options to allow users to enable or disable Infinite Scroll.

5+

Add Jetpack Subscribe Form To Bottom of All WordPress Posts & Pages

You may have noticed I’ve added subscribe widgets at the end of every post, right below the related articles. It’s really simple to do, and comes built-in with the Jetpack WordPress Plugin.

First, make sure you’re using a child theme so you’re not changing the core code of your theme, as your changes will be lost on updates. You can read about creating a child theme here at the WordPress Codex.

1. Register New Sidebar

First, add this to your functions.php file. It will register a new sidebar called Subscribe In Page.

register_sidebar( array(
    'name' => 'Subscribe in page',
    'id' => 'subscribe-in-page',
    'before_widget' => '<div id="subscribe">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>'
) );

2. Call Our New Sidebar

Now, in your WordPress loop, find something like <?php the_content(); ?>. Here’s what my the_contenet() call looks like:

<div class="entry-content" itemprop="mainContentOfPage">
    <?php the_content(); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-links-next-prev">', 'after' => '</div>', 'nextpagelink' => '<button class="next-page-nav">' . __( 'Next page &rarr;', 'independent_publisher' ) . '</button>', 'previouspagelink' => '<button class="previous-page-nav">' . __( '&larr; Previous page', 'independent_publisher' ) . '</button>', 'next_or_number' => 'next' ) ); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'independent_publisher' ), 'after' => '</div>' ) ); ?>
</div>
<!-- .entry-content -->

Notice there’s a couple functions after the_content(), this is normal and will vary from theme to theme. Any plugins you’ve got set to appear below your post will be shown, and then the subscription form will be shown.

4. Add Your Jetpack Subscribe Widget

Just like adding a normal widget. Go to Appearances, and then Widgets. You should see an area titled Subscribe In Page. Drag the Blog Subscriptions (JetPack) widget into the Subscribe In Page sidebar area. Configure it, save it.

5. Add The Sidebar To The Theme

To add the Jetpack subscription form, add <?php dynamic_sidebar( ‘subscribe-in-page’ ); ?>, which calls our custom sidebar, to your loop. It should go somewhere under the_content() if you want it to show at the end of the post. If you want it at the beginning, add <?php dynamic_sidebar( ‘subscribe-in-page’ ); ?> before the_content().

You’re Done!

And that’s really all there is to adding a subscribe form to the end of each post. You can also add the same subscribe form in the sidebar, like I have at longren.org. As a note, the Jetpack plugin is packed full of functionality. Chances are good that you’ll find more Jetpack modules to use, other than the Subscriptions module.

Do you use the Jetpack plugin for WordPress?

View Results

Loading ... Loading ...

2+