Create a Space theme for WordPress – 2021 – Part 6, Archive page

Table Of Contents

Introduction

This is part 6 of a series on creating a WordPress space theme. It looks at the archive page that is used by WordPress to display a list of posts in a certain category. Also, the posts page, pagination and the post thumbnail is covered.

In the site backend add the markup category to the menu. If you then go to the front end and click on the Markup link you will see a blank screen. That is because there is no archive page in the theme.

The archive page

Firstly add a page named archive.php in the theme. Copy the page.php code to it, then modify it as below. We now need to create a new template part named section-archive.php.

<?php get_header();?>
    <section class="page-wrap">
        <div class="container">
       
        <?php get_template_part('includes/section', 'archive')?>
        </div>
    </section>
<?php get_footer();?>

Section-archive.php

In the includes folder create a file named section-archive.php. The new template part uses the WordPress loop to create a list of blog posts. the_exerpt() function shows a short extract of the content. Next, the_permalink() function creates a link to the post. Finally, some bootstrap classes are used to format the listings and create a read more button from the permalink.

<?php if (have_posts()): while(have_posts()): the_post();?>
<div class="card mb-3">
 <div class="card-body">
    <H3> <?php the_title()?></h3>
    <?php the_excerpt();?>

    <a href="<?php the_permalink();?>" class ="btn btn-success">Read more</a>
 </div>
</div>
<?php endwhile; else: endif; ?>

The archive page should now look as below.

Paginate the blog post list.

The blog list is not paginated and shows all the posts. lets fix this.

Firstly go to settings>reading in the backend and set the Blog posts to show at most to 3.

There are two basic ways of paginating the archive page, firstly previous and next links.

<?php get_header();?>
    <section class="page-wrap">
        <div class="container">
         <?php get_template_part('includes/section', 'archive')?>
         <?php previous_posts_link(); ?>
         <?php next_posts_link(); ?>
        </div>
    </section>
<?php get_footer();?>

Secondly paged links.

<?php get_header();?>
    <section class="page-wrap">
        <div class="container">
         <?php get_template_part('includes/section', 'archive')?>
         <?php the_posts_pagination();?>
        </div>
    </section>
<?php get_footer();?>

With paged links, you will need to hide the screenreader text. Add the CSS code, below to main.css.

/* hide text on archive page pagination*/
.screen-reader-text{
    display: none;
}

Folder structure

Your theme folder should now have the structure shown below.

In part 7 we look at the blog info settings.