Filtering posts by categories with a Load more button in Genesis using FacetWP

In the past, I wrote about filtering posts using Ajax Load More plugin here.

This tutorial provides the steps for filtering posts on the Posts page by categories in Genesis using FacetWP. Clicking on Load More button below the posts will load the next set below the current ones.

We will use column classes in Genesis to show the posts in a 3-column grid, remove all the built-in loop action hooks and add custom ones to show the featured image (or a placeholder image) and title for all posts. The filter row will appear at the top above the posts and below the posts is a Load More button.

Screencast:

Step 1

Install and activate FacetWP.

Go to Settings > FacetWP > Facets.

Click on the built-in Categories facet and change the facet type to Radio.

Also set Show ghosts and Preserve ghost order to Yes.

Click on Re-Index button.

Step 2

Add the following in child theme's functions.php:

// Force FacetWP to refresh the template on initial pageload.
add_filter( 'facetwp_template_force_load', '__return_true' );

// Register custom size for images on content archives.
add_image_size( 'content-archive-image', 800, 500, true );

add_action( 'pre_get_posts', 'custom_set_categories_on_blog' );
/**
 * Show posts only from specific categories on the Posts page.
 *
 * @author Bill Erickson
 * @link http://www.billerickson.net/customize-the-wordpress-query/
 * @param object $query data.
 */
function custom_set_categories_on_blog( $query ) {
    if ( $query->is_main_query() && $query->is_home() ) {
        $query->set( 'category_name', 'breakfast, lunch, dinner' );
    }
}

The last block of code in the above (pre_get_posts action hook and the custom_set_categories_on_blog()) is to display posts belonging to the specified categories on the Posts page. You would need to change the categories according to the ones in your site if you want to restrict the display on the front end to them. If you want all the categories to appear, simply delete this last block of code.

Regenerate thumbnails.

Step 3

Create a file named say, fwp-load-more.js in child theme's js directory having the following: