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 1
Install and activate Ajax Load More.
Step 2
Add the following in child theme's functions.php:
// Register custom size for images on custom grid.
add_image_size( 'custom-grid-image', 800, 500, true );
Regenerate thumbnails if necessary.
Step 3
Go to Ajax Load More > Settings.
Tick "I want to use my own CSS styles." under 'Disable CSS' and save the settings.
Step 4
At Ajax Load More > Repeater Templates replace the existing code in Default Template with:
