Sridhar Katakam

Genesis and WordPress Tutorials

Filtering with click to Load more using Ajax Load More in Genesis

by 2 Comments

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:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar,

    Looks great! But can this be done without the static code in the end? So in .php with a dynamic “alm-filter-nav” and without pasting shortcode in a static page? I would like to use this in an archive page for my custom post type “instructional movies” . Additional filter tags will be added later by my client. Would be nice if I do not have to change the filter manually every time they add (or remove) tags.

    Hope to hear from you,

    Thanks again!

    Reply
    • >