This thread is resolved. Here is a description of the problem and solution.
Problem: I would like to move a View's pagination links to the bottom of the page, position them centered or left-aligned, and I would like to have them use the same font and color effects that you can see on archive pages.
Solution: Move the wpv-pagination shortcodes into the Loop Output to reposition the pagination links. While the following CSS will align the pagination links to the left, further custom CSS will be required to style the links to match existing archive navigation in font, color, and interaction states.
.js-wpv-pagination-nav-links-container.pagination {
float: none;
}
Relevant Documentation:
https://toolset.com/documentation/user-guides/views-pagination/
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 4 replies, has 2 voices.
Last updated by 6 years, 6 months ago.
Assisted by: Christian Cox.
I am trying to: display 18 posts per page in a grid with pagination links at the bottom of the page.
Link to a page where the issue can be seen: hidden link
I expected to see: 18 posts per page in a grid with pagination links at the bottom of the page.
Instead, I got: 18 posts in a grid with no pagination links at the bottom of the page.
I created a View named "View - Profiles Index" (ID 3617) and set the pagination accordingly (see attached screenshot for relevant parts of the view settings). Alas, no pagination links appear at the bottom of hidden link, where the view is in use, and there are indeed more than 18 posts (the view is pulling from three custom post types: Alumni (16), Faculty (4), and Students (3)).
Can someone take a look at what I'm doing wrong? Thank you!
One additional comment: I watched this screencast on YouTube ("Views Training Course - Part 4: Pagination ," hidden link) and see how to add paginated links now.
However, the links appear in the upper right corner of the page (see profiles view pagination.png). I'd like the pagination to appear below the page body and either centered or left-aligned. View it on the web here:
hidden link
The pagination links also appear in a different color and font, and in a different location, than the pagination on an archive page (see alumni archive pagination.png). View it on the web here:
hidden link
I'd like the pagination to appear below the page body and either centered or left-aligned.
Hello, you can cut the wpv-pagination shortcode from the Search and Paginations panel, and paste it in the Loop Output editor just before the [/wpv-items-found] closing shortcode. This will move the links below any results found by the View. See the screenshot attached here - the shortcode is highlighted.
Add this custom CSS to the Search and Pagination panel's CSS editor and it will override your theme's right-aligned positioning for this navigation element:
.js-wpv-pagination-nav-links-container.pagination {
float: none;
}
The pagination links also appear in a different color and font, and in a different location, than the pagination on an archive page
I don't have a simple copy and paste solution for this, because each theme's styles require different markup and CSS classes. You can use custom CSS to style the links however you would like. Add the CSS to the Search and Pagination panel's CSS editor. If there is a specific style you're having trouble overriding, let me know.
