Sridhar Katakam

Genesis and WordPress Tutorials

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

by 4 Comments

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:

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

Already a member? Log in below or here.

  • Hello Sridhar,

    Great tutorial, but can’t get it to work in my situation.
    I have two questions:

    Given:
    – I have installed: CPTUI, FacetWP
    – I want to implement this with the post type archive page for my custom post type “Instruction video’s”.
    – Created a taxonomie “Video tags” for which I made a facet like in your tutorial.
    – Build the archive template for this specific post type, using the code provided in your tutorial, named archive-instruction_videos.php
    – Changed do_shortcode( ‘[facetwp facet=”categories”]’ ) to do_shortcode( ‘[facetwp facet=”videotags”]’ ) here.

    Al set and when I visit the page I only see “all” but no videotags to filter by. I created 9 posts with their respective videotags. Video’s have more than one videotag.

    Why is the shortcode not displaying my videotags?
    When I click “load more” it works, Set the max posts to show to 6 for testing purposes and on click load more, the other 3 posts are added to the page. But if I hit refresh I only see the additional 3 posts loaded by the load more and without the load more button. This probably has to do with the “?fwp_paged=2” parameter added to the url. Is this normal behaviour for the load more page when on page 2?

    Hope you can help me figuring this out,

    Greetz,

    Niels

    Reply

      • My question why is the shortcode not displaying any of the custom taxonomies has been answered. The solution could be found om the facetwp website itself stating: By default, FacetWP only indexes content from searchable post types (exclude_from_search = false)

        So not excluding the post type ‘instruction_videos’ from search solved the problem.

        Reply

  • Good afternoon Sridhar,

    Still struggling with this. This code works great except when you refresh the browser. I have 9 posts. If you display 6 results per page and you click on the ‘load more’ button, you will see 9 results as expected, but if on refreshing the browser, you will now only see the 3 results given on page 2. The first 6 results are ignored because url hash is set to ?fwp_paged=2 I think?

    Hoping you have an answer to this. Don’t even know if there’s one. I can’t compare my live code in the works since I can’t find any working demo showing me it can be done at all.

    Reply
    • >