→ Customizing FacetWP Pagination

FacetWP includes basic pagination. They’re minimally themed (intentionally). Displaying the pagination controls is a matter of using the following shortcode:

[facetwp pager="true"]

With a little extra CSS, they look like this:

facetwp-pager

Also, the facetwp_pager_html hook lets you alter how the pagination appears. In the following example, we’ll display a simple Previous / Next pager.

function my_facetwp_pager_html( $output, $params ) {
    $output = '';
    $page = $params['page'];
    $total_pages = $params['total_pages'];
    if ( $page > 1 ) {
        $output .= '<a class="facetwp-page" data-page="' . ($page - 1) . '">Previous</a>';
    }
    if ( $page < $total_pages && $total_pages > 1 ) {
        $output .= '<a class="facetwp-page" data-page="' . ($page + 1) . '">Next</a>';
    }
    return $output;
}

add_filter( 'facetwp_pager_html', 'my_facetwp_pager_html', 10, 2 );

The final output will look like this:

facetwp-pager-simple