Enhancing Pagination in Toolset Views

In a site that I am working on locally, I used Views to retrieve and show the posts on /blog page. By default there will be no pagination.

If we enable Pagination with manual transition per these settings:

it is going to appear on top of the posts output like this:

If you would like to change it so it appears below the posts and more user-friendly like

follow these steps:

Step 1: Move the pagination below the output

a) Click View/Edit Meta HTML button in “Pagination and Sliders settings” section.

b) Cut the generated code from [[wpv-pagination] to [/wpv-pagination]]

Ex.:

c) Scroll down and click on View/Edit Meta HTML button in “View Layout – Edit the layout” section.

Paste it immediately after

<!-- wpv-loop-end -->

so it looks like this:

d) Update the View.

The result of doing this is:

Step 2: Making Views pagination use WP-PageNavi

a) Install and activate WP-PageNavi plugin.

b) Add the following in child theme’s functions.php:

// Get the page number into wp_pagenavi
function pagenavi_paged($query) {
	$paged = get_query_var('paged') ? get_query_var('paged') : 1;
	$query->query_vars['paged'] = $paged;
	return $query;
}
add_filter('parse_query', 'pagenavi_paged');

// Add a custom wp_pagenavi shortcode
function wpv_pagenavi($args, $content) {
	global $WP_Views;
	return wp_pagenavi( array('echo' => false, 'query' => $WP_Views->post_query) );
}
add_shortcode('wpv-pagination', 'wpv_pagenavi');

to get

c) [Optional] We can now center it and style as we like it.

Ex.:

.wp-pagenavi {
    color: #555555;
    font: 12px/1em "Helvetica Neue",Helvetica,sans-serif;
    text-align: center;
}

.wp-pagenavi a, .wp-pagenavi span {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #DEDEDE !important;
    padding: 3px 7px !important;
}

.wp-pagenavi span.pages {
    background: #FAFAFA;
    border: 1px solid #DEDEDE !important;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
    background: #EEE;
    border: 1px solid #BBBBBB !important;
}

.wp-pagenavi span.current {
    font-weight: normal !important;
}

.wp-pagenavi a.page,
.wp-pagenavi  a.nextpostslink,
.wp-pagenavi  a.previouspostslink {
    color: #666;
}

will result in

References:

https://wp-types.com/forums/topic/view-pagination-location/#post-29976

http://wp-types.com/forums/topic/pagenavi/#post-24462