Blog: R6D67: #100DaysOfCode (More Posts)
This has been a hugely satisfying end to my working week as I finally managed to implement Pagination to a WordPress theme to my utter excitement and relief. It took a lot of googling and coding and failed attempts that left me at my wit’s end.
Everything I was trying seemed completely at odds with what the WordPress Codex, Documentation, and Theme handbook was telling me. The Pagination markup for where I wanted my pagination to show up was there in the code but not the methods on the front end. At all.
So my markup was working but where the output from the methods should be, there was nothing but complete blank white space in the code.
And then, the breakthrough.
What was the issue?
Finally, the methods showed on front-page.php template. with the right catch-all pagination code on that file.
So, uplifted by this success but a little affronted that it took me this much time to get to that point, I took a step back and looked at the settings in the WordPress admin area.
The blog frontpage template must be the one that was showing up as the post page which is why it was showing up there and not elsewhere. I was of course familiar with the concept that WordPress can assign a template to be a particular post page; the page according to the WordPress Admin area has the default collection of WordPress posts.
But I must have been using every combination of settings to get the template I wanted to show up properly but the right one for the methods to work, since every one that I tried did had no effect. So the blog frontpage template must be the one that is showing up as the “post” page.
So for my review and for yours to summarise
front-page.php is the template used when a template has been designated the posts page of the WordPress site. It is the template for the Site Front Page. Make sure your “post” page is not set as a static page.
home.php – The template for a Custom Blogs posts index page.
page.php – used for static page templates. No pagination methods work on these template files… but that was never an issue for me since I never attempted to use pagination on these.
index.php – the default catch-all template for all types of content.
Working with pagination methods
Once this was out of the way it was time to customise the pagination.
There are a few different pagination methods you can use. I’ve utilised them all on this theme.
paginate_links() – this seems to be showing some numbered pagination. It generates the following classes in WordPress output. .prev .next .page-numbers For the purposes for CSS, page number as generated by the markup output comes before the .pre and .next classes in the order of preference.
posts_nav_link() – does not seem to generate it’s own classes. So feel free to surround these with your own. I surround them in a paragraph tag to separate them from the paginate links method.
The same is true likewise for next_posts_link() and previous_posts_link(). I used span elements to surround the above 2 methods to make sure they were displayed side by side.
Using this and the element classes WordPress provides, it was relatively easy to apply the CSS Styling that I wanted. More information about how I did this will be available in the readme.md file for this repository.