Tag: facetwp

If you use StudioPress’ Genesis themes, you may be used to that pretty numerical pagination instead of ye olde previous and next buttons. And if you use FacetWP, you may have found out you need to use their pagination to make things work right.

Thankfully this can be fixed thanks to two people’s previous work.

Replace the Navigation

First we look to Sridhar Katakam who came up with an elegant way to replace the normal Genesis post navigation. The code is nearly the same, I just single-lined the returns:

// Replace Genesis' Pagination with FacetWP's.
// Context: Posts page, all Archives and Search results page.
// @author Sridhar Katakam - http://sridharkatakam.com/facetwp-genesis/
add_action( 'loop_end', 'MYSITE_replace_genesis_pagination' );
function MYSITE_replace_genesis_pagination() {
	if ( ! ( is_home() || is_archive() || is_search() ) ) return;
	remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );
	add_action( 'genesis_after_endwhile', 'MYSITE_facet_posts_nav' );
}
function MYSITE_facet_posts_nav() {
	echo facetwp_display( 'pager' );
}

The nice part about this is that if you’re not using FacetWP on that page, it reverts to the default pager. I’m not doing a check on if Facet exists because I have this in a giant block that does it for me. If you need to, though, the code would be this:

if ( function_exists( 'facetwp_display' ) ) { 
    add_action( 'loop_end', 'MYSITE_replace_genesis_pagination' ); 
}

And yes, you should always check if the plugin is loaded before you break things.

Style the Navigation

The styling magic comes from a slight fork of Matt Gibbs’ code to remove pagination if there’s only one post:

// Style pagination to look like Genesis
// @author Matt Gibbs
// https://gist.github.com/mgibbs189/69176ef41fa4e26d1419
function MYSITE_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 ) . '">&laquo; Previous Page</a></li>';
        }
        if ( 3 < $page ) {
            $output .= '<li><a class="facetwp-page first-page" data-page="1">1</a></li>';
            $output .= ' <span class="dots">…</span> ';
        }
        for ( $i = 2; $i > 0; $i-- ) {
            if ( 0 < ( $page - $i ) ) {
                $output .= '<li><a class="facetwp-page" data-page="' . ($page - $i) . '">' . ($page - $i) . '</a></li>';
            }
        }

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

        for ( $i = 1; $i <= 2; $i++ ) {
            if ( $total_pages >= ( $page + $i ) ) {
                $output .= '<li><a class="facetwp-page" data-page="' . ($page + $i) . '">' . ($page + $i) . '</a></li>';
            }
        }
        if ( $total_pages > ( $page + 2 ) ) {
            $output .= ' <span class="dots">…</span> ';
            $output .= '<li><a class="facetwp-page last-page" data-page="' . $total_pages . '">' . $total_pages . '</a></li>';
        }
        if ( $page < $total_pages ) {
            $output .= '<li><a class="facetwp-page" data-page="' . ( $page + 1 ) . '">Next Page &raquo;</a></li>';
        }
    }

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

    return $output;
}
add_filter( 'facetwp_pager_html', 'MYSITE_facetwp_pager', 10, 2 );

This is somewhat obvious. It adds in <li></li> around each page item, and also wraps the entire block in the default Genesis code of <div class="archive-pagination pagination"><ul></ul></div> to produce the default Genesis display.