Ajax Load More is a useful WordPress plugin for automatically loading the next page of posts upon scrolling or manually by a button click. It also supports simple filtering (not faceted). In this tutorial, I provide the steps to set up (on a static Page) a grid of posts that belong to 3 specific categories (Breakfast, Lunch and Dinner) on the initial page load with options to filter by one of these specific categories above the grid. There will be a Load More button below the posts which when clicked, will load the next set of posts. For each post, we are going to show linked featured image (or a placeholder if there's no featured image) and linked title. This method can not only be used for filtering posts by category (like in this tutorial) but also for any post type by category/tag/date/custom fields/author etc.
Step 1Install and activate Ajax Load More.
Step 2Add the following in child theme's functions.php:
Regenerate thumbnails if necessary.
// Register custom size for images on custom grid. add_image_size( 'custom-grid-image', 800, 500, true );
Step 3Go to Ajax Load More > Settings. Tick "I want to use my own CSS styles." under 'Disable CSS' and save the settings.
Step 4At Ajax Load More > Repeater Templates replace the existing code in Default Template with:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.