Sridhar Katakam

Genesis and WordPress Tutorials

Category switcher without page refresh using FacetWP and jQuery Nice Select in Genesis

by 2 Comments

neilpatel.com/blog has a lovely category selector dropdown which uses jQuery Nice Select to style the select menu in a clean and consistent manner across the various browsers.

This tutorial provides the steps to set up the same before the content-sidebar wrap on the Posts page in Genesis using FacetWP and jQuery Nice Select.

Step 1

Install and activate FacetWP.

Go to Settings > FacetWP and add a new dropdown facet with Categories as the Data Source.

Set its name to categories_dropdown.

Set the Default label to everything.

Step 2

We are going to remove the default Genesis pagination and add FacetWP's pager.

Add the code below in child theme's functions.php to set up Genesis markup for the FacetWP's pager so it looks similar to the default pagination in Genesis:

add_filter( 'facetwp_pager_html', 'prefix_genesis_facetwp_pager', 10, 2 );
/**
 * Styles FacetWP pagination to look like Genesis.
 *
 * @version 1.0.0
 *
 * @author  Mike Hemberger @JiveDig
 *
 * @link https://halfelf.org/2017/facetwp-genesis-pagination/
 * @link https://gist.github.com/mgibbs189/69176ef41fa4e26d1419
 */
function prefix_genesis_facetwp_pager( $output, $params ) {

    $output      = '<div class="archive-pagination pagination"><ul>';
    $page        = (int) $params['page'];
    $total_pages = (int) $params['total_pages'];

    // Only show pagination when > 1 page.
    if ( 1 < $total_pages ) {

        if ( 1 < $page ) {
            $output .= '<li><a class="facetwp-page" data-page="' . ( $page - 1 ) . '">« Previous Page</a></li>';
        }
        if ( 3 < $page ) {
            $output .= '<li><a class="facetwp-page first-page" data-page="1"><span class="screen-reader-text">Page </span>1</a></li>';
            $output .= '<li class="pagination-omission">…</li>';
        }
        for ( $i = 2; $i > 0; $i-- ) {
            if ( 0 < ( $page - $i ) ) {
                $output .= '<li><a class="facetwp-page" data-page="' . ($page - $i) . '"><span class="screen-reader-text">Page </span>' . ($page - $i) . '</a></li>';
            }
        }

        // Current page.
        $output .= '<li class="active"><a class="facetwp-page" aria-label="Current page" data-page="' . $page . '"><span class="screen-reader-text">Page </span>' . $page . '</a></li>';

        for ( $i = 1; $i <= 2; $i++ ) {
            if ( $total_pages >= ( $page + $i ) ) {
                $output .= '<li><a class="facetwp-page" data-page="' . ($page + $i) . '"><span class="screen-reader-text">Page </span>' . ($page + $i) . '</a></li>';
            }
        }
        if ( $total_pages > ( $page + 2 ) ) {
            $output .= '<li class="pagination-omission">…</li>';
            $output .= '<li><a class="facetwp-page last-page" data-page="' . $total_pages . '"><span class="screen-reader-text">Page </span>' . $total_pages . '</a></li>';
        }
        if ( $page < $total_pages ) {
            $output .= '<li><a class="facetwp-page" data-page="' . ( $page + 1 ) . '">Next Page »</a></li>';
        }
    }

    $output .= '</ul></div>';

    return $output;
}

Due to a bug in the current version of FacetWP (v3.1.4), its pager will show more pages than the actual number i.e., whereas it should be showing only posts (post_type = 'post'), it seems to query all public post types (typically: page, attachment).

Until it is fixed by the plugin developer, a workaround is to set post_type to post in the default query on the Posts page using pre_get_posts.

Add the following in functions.php:

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

Already a member? Log in below or here.

  • I’ve been using a lot of your tutorials and my functions file is getting messy. What is the best way to create a folder in my child theme and include each of these as a separate item?

    Reply

    • If you notice the code in Genesis Sample’s functions.php, you can find:

      // Add the helper functions.
include_once( get_stylesheet_directory() . '/lib/helper-functions.php' );

      so you can similarly create a directory named say, includes in your child theme directory, place your mod-specific code in a file named say, category-switcher.php (with a PHP opening tag at the beginning but NO genesis(); at the end) and call it like so in functions.php:

      include_once( get_stylesheet_directory() . '/includes/category-switcher.php' );
      Reply
    • >