WordPress Theme Development single.php

In this blog, we’re going to make blog lists in WordPress “home” pages more user-friendly by adding pagination to them. To do this we will introduce category and archive templates into the project and also customise the home.php template further.

By default, WordPress gives us a limited set of blog links on the home.php template. This limit is set in the admin area. As I write this, I’m looking at the “Reading” settings in the admin area. It tells me that at most WordPress shows up to 10 posts per page.

Dashboard -----> Settings -----> Reading -----> Blog pages show at most 10 posts. 

After this, WordPress starts cutting off the links and only shows the most recent 10 posts. We can either increase or decrease this number in the admin area. At the time of writing, I have 6 published posts, 6 if you include the wrong I’m editing right now. What if I changed the above setting to show only 3 posts?

Dashboard -----> Settings -----> Reading -----> Blog pages show at most 3 posts.

Now if I go on to home.php only 3 blogs in the list will show up. We need a way to give the user access to every Post in the blog.

Let’s start adding some pagination. This will help give us access to all the posts by clicking through numerous links of pages.

We’ll look at a few options for adding pagination. It takes 1 or 2 simple methods, and remember, takes into account the changes you’ve made in the “Reading” settings.

<?php
    paginate_links();

The pagination method does a lot of heavy lifting; checking for the number of posts that exist and taking into account the Reading setting in the admin area.

The documentation tells us that this method returns paginated links for archived pages. But it works in the same way when we’re on the standard Home template. It gives you a standard set of numbered links and 2 links side by side to go through pages of links one by one.

There’s a lengthy list of parameters that can be passed in too.

Here’s an example that uses a few of these parameters, customising the text of the previous and next posts links.

<?php echo paginate_links( 

    array (
                                    
        "prev_next" => true,
        "prev_text" => "Prev Posts",
        "next_text" => "Next Posts"            
    )
); 

If you want more customised links there are 2 other methods that you can use.

<?php 

    previous_posts_link( string $label = null )
    next_posts_link( string $label = null )

These methods take a single parameter that customises the text of the links

 <?php 
 
     // previous_posts_link();
     previous_posts_link( "label previous" );<br>
 ?>

This is the HTML returned by all of the above methods. The containing nav element is part of the home.php template. But we can see that paginate_links and other methods do the heavy lifting of the pagination links for us and give us the class selectors we need to customise them to our designs.

<nav class="blog_home_pagination">
                           
    <span aria-current="page" class="page-numbers current">1</span>

    <a class="page-numbers" href="http://theme_url/blog/page/2/">2</a>
    <a class="next page-numbers" href="http://theme_url/blog/page/2/">Next »</a>   
                            
    <a href="http://theme_url/blog/page/2/">Next Page »</a>
        
</nav>

Copy the code from home.php and bring the code into 2 new files.

category.php
archive.php

Add the comment template to both of these templates with a comment header for each, like this.

<?php 

/*

    Template Name: Site Archive  (and Category Template for category.php
*/
?>

We have now 3 main templates where blog lists and pagination are working and we can access all the posts we need to use the Pagination methods that we’ve just created.

Working with the Category Template

In the location where I’m developing this website locally, I’ve created 4 separate categories for testing

• The Development
• WordPress Walkthrough
• Posts
• Pages

So that is 4 categories assigned to 6 Posts.

Each category is created via the admin area in the Posts section and has an identifier that is presented in the URL known as a “slug”. e.g.

category/posts/

At the time of writing, with 4 assigned blogs to the “Posts” category, it shows 4 blogs across 2 pages. Indicating the pagination is working perfectly.

Let’s take the opportunity to discuss a couple of Category methods

<h2><?php the_category(); ?></h2>

A list of all the categories on the website. You could use this or other any template to link to all pages on your website of the assigned Post Category.                    

<p>Category: <?php single_cat_title(); ?></p>

This method simply displays the current category name, not a list. So if the URL refers to the “Posts” Category the Category title is displayed.

Here’s an example:

<div class="blog_list_container">

    <h2 class="category_title">Category Title - <?php single_cat_title(); ?></h2>
    
</div>

Working with the Archive Template

In a similar way, I’ll give a quick example of how you might use an archive template. We can identify the archive we’re looking at with a simple WordPress method.

<?php archive <h3><?php the_archive_title(); ?></h3>    ?>

There aren’t any ways to find it with a URL at the moment. If you haven’t set any of these up yet, and you need to verify your archive templates are working, you can access them using Post Archives with a URL like this…

subdomain_2024/2024/05/

This URL brings up the archive template for the Month of May 2024.

<div class="blog_list_container">

    <h2>Archive: <?php echo "echo archive"; ?> </h2>

    <h3><?php the_archive_title(); ?></h3>   
    
</div>

Archive templates are usually accessed using archive widgets. I’ll be talking about Widgets and how to use them in WordPress, in the next blog.