Infinite scrolling and footer menus

With the most recent release of my WordPress theme Cover, I’ve included an enhancement that I’m kind of proud of. Cover supports a few modules in the Jetpack plugin, but the one I want to highlight is the infinite scrolling functionality. The basic implementation of infinite scrolling support is simple enough: add_theme_support( ‘infinite-scroll’, array( /*…

With the most recent release of my WordPress theme Cover, I’ve included an enhancement that I’m kind of proud of.

Cover supports a few modules in the Jetpack plugin, but the one I want to highlight is the infinite scrolling functionality.

The basic implementation of infinite scrolling support is simple enough:

add_theme_support( 'infinite-scroll', array(
  /* options */
) );

With infinite scrolling, you’re never going to see the footer. This is a problem if you’ve got widgets in the footer, but fortunately the Jetpack team thought of this. They’re included an optional argument footer_widgets which can tell whether or not a theme has footer widgets. If it does, it’ll switch the type from scroll to click.

Cover doesn’t use footer widgets — all the widgets go inside the overlay — but it does have the option of a footer social media menu. In the event of this menu’s existence, the infinite scrolling support needs to be aware enough to switch the type.

This is where the Jetpack-provided filter infinite_scroll_has_footer_widgets comes in handy. Here is Cover’s implementation:

function cover_infinite_scroll_has_footer_widgets( $has_widgets ) {
  $has_widgets = false;
  if ( has_nav_menu( 'social_footer' ) ) {
    $has_widgets = true;
  }
  return $has_widgets;
}
add_filter( 'infinite_scroll_has_footer_widgets', 'cover_infinite_scroll_has_footer_widgets', 10, 1 );

This way, it’s easy enough to detect the menu and indicate the type switch from scroll to click.

4 responses

  1. Joyce Lau Avatar

    How do you activate Infinite scrolling in places where it has cover_paging_nav() ? For example, in author pages the feed of recent articles.

    1. Just activate the Jetpack module, and it just works. :)

    2. Joyce Lau Avatar

      Thanks for the reply!

      Is it different in a local dev environment? I ask because it seems to work only on the home feed, but not other pages.

    3. In my local environment (powered by Ampps), much of Jetpack’s functionality is kind of hit or miss. But in my production enviroment (here at eichefam.net), I haven’t had any problems. None of the archive pages have any issues with the infinite scrolling, that I’m aware of.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related