Sunday, February 12, 2017

Enabling Infinite Scrolling / Ajax Loading on Wordpress Baskerville Theme (Anders Norén)

Baskerville Infinite Scrolling With Plugin

I recently built a website using Anders Norén's free Wordpress theme, Baskerville. This is probably one of the best free themes out there, and definitely the best free theme for sites that are trying to emulate the pinterest / masonry grid style of sites, where individual products are laid out in a re-sizable grid layout.

My only complaint with this theme is that it is just begging to be used with an Ajax infinite scrolling feature, but it does not support it out of the box. I have seen multiple forum posts asking for the author to add it, but it looks like no progress has been made (and I don't blame Anders - he is a very busy and amazingly talented author who deserves to spend his time on more pressing projects).

I didn't want to give up on this theme, but infinite scrolling became a requirement for my new site, so I set out to somehow add the feature to this theme. In the end, it actually didn't take that long to figure out and was not nearly as complicated as I thought.

Initially I was going to take a backend approach and try to rewrite a bunch of PHP, but I quickly realized it would be far easier to use a pre-built plugin to provide the backend support for AJAX loading, and write some Javascript myself to get it working with the theme.

How I added infinite scrolling to the Baskerville Wordpress Theme:

Step 1: Install the "Ajax Load More - Infinite Scroll" Plugin