Customizing the display of archive pages | Practical application (8) for developing a WordPress theme

In today’s article in the series of developing a WordPress template from scratch, we will explain how to customize the template template file responsible for displaying the archive pages of the WordPress website, and we will explain the different ways to customize archive pages of different types.

Archive pages in WordPress are very similar to a blog page, but they are limited to displaying articles or posts that belong to a specific category, hashtag, were written by a specific author, were published in a specific month or year, etc.

What is the benefit of archive pages on a WordPress website?

One of the important benefits of archive pages in WordPress is that they easily guide readers through the content previously published on the site, and they organize the list of published articles under a specific publication type, date, classification, or tag. They also facilitate the process of moving between articles by listing content. Your site in an organized manner.

WordPress usually creates archive pages automatically so you don’t need to create them yourself from scratch. But you may need to customize the way these pages are displayed in your WordPress theme as you see fit.

How do we customize the way archive pages are displayed on a WordPress site?

Any WordPress site includes a blog page. This page displays all the site’s articles from newest to oldest. You can consider the blog page to be a comprehensive archive page , as it displays all articles on the site, regardless of their classification, tag, author, or date they were published.

As you know, this blog page can be the main page of the site, and in this case there is no need to create a separate page dedicated to it, or it can be displayed as an internal page on the site if the main page displays other custom content, and then you must create an internal page on your site and name it with the name you want. For example, a blog, articles, or any other name, and customize the way it is displayed through a template file dedicated to the archive.

Note: You do not have to add any content to this internal blog page. All you need to do is tell WordPress that you want to use this page to display blog articles through the control panel Settings < Reading

Archive pages in WordPress are very similar to the blog page, except that they are more specific. They are limited to displaying articles or posts that belong to a specific category, or hashtag, or were written by a specific author, or were published in a specific month or year, and so on. .

For example, if we go to the page that displays the latest articles on our website, which we created in the first practical application of the template development series, and we click on a specific classification under one of the articles, and let the classification be trees , and since the nice name for this classification is trees, the WordPress site will take us to the archive page for this. This classification and page can be found at the following link:

https://yourdomain/category/trees/

On this page, we see all articles that have the category Trees, as shown in the following image:

This applies to all other types of archive pages that WordPress automatically creates at the URL of the requested page.

As you can see from the image above, WordPress will currently display on our current website the archive page for the categories based on the basic template file index.php that we created in a previous lesson in this series, and the sequence followed to display the archive pages is as shown in the following diagram:

Therefore, we can customize the way archive pages are displayed by creating more specific template files within the WordPress template hierarchy within our template folder to display archive pages of different types.

For example we could create:

archive.php file to display a general archive page, regardless of the type of archive
Category.php file to display the category archive
author.php file to display the book archive
tag.php file to display tag archive
date.php file to display the date archive
And so on..

Alternatively, we can rely on the index file itself to customize the display of archive pages, but with a small else if condition that outputs the page title at the top of the file after checking whether the displayed page is an archive or not by using the ready-made function the_archive_title.

This function detects the type of archive and accordingly prints a suitable address for this archive and has the following general form:

the_archive_title( string $before = ”, string $after = ” )

Based on that condition, either the archive title is printed for us at the top of the page if we are on an archive page (we know this through the conditional tag is_archive() ) or the phrase (latest articles) if we are on a blog page (we know this through the conditional tag is_home(). )

In our current article, we will rely on creating specific template files for each archive type because it makes the code better organized, but of course you are free to follow the method you prefer in your WordPress theme.

Create a special template file with all archive pages archive.php

Since there is no archive.php file currently inside our custom WordPress theme, WordPress will use the main template file index.php as mentioned earlier to display the category archive and any other archives on the site.

To customize the display of archive pages in our template, we will adopt the method of creating a general archive template file archive.php inside our template folder and write code similar to the code of the index.php file, but deleting the highlighted section at the top of the content and displaying the category name instead of the phrase Latest Articles as follows:

To do this, we write the following code in the archive.php file:

<?php

/**

* Public archive file

* @package ola1

* @subpackage olatheme

<?php get_header(); ?>

<main>

<h2 class=“text-center”> <?php the_archive_title(); ?> </h2>

<section class=“articles”>

<?php

if ( have_posts() ) {

while ( have_posts() ) {

the_post();

<article>

<?php if ( has_post_thumbnail() ) { ?>

<div class=“thumb” style=“background-image: url(<?php the_post_thumbnail_url(); ?>);”></div>

<?php } else{ ?>

<div class=“thumb” style=“background-image: url(<?php bloginfo(‘template_directory’); ?>/images/default.png”);“></div>

<?php

}

<?php the_category(‘، ‘); ?>

<a href=”<?php the_permalink(); ?>“>

<?php the_title( ‘<h3>’, ‘</h3>’ ); ?>

</a>

<div class=”summary“><?php the_excerpt(); ?></div>

<a class=” btn btn-link ” href=” < ?php the_permalink () ; ? > “><?php _e( ‘Read more’,’olatheme’ ); ?></a>

</article>

<?php

}

} else {

echo _e( ‘There are no articles in this archive’ , ‘olatheme’ );

}

</section>

<nav class=”pagination”>

< ?php echo previous_posts_link ( __ ( ‘<Newer Posts’ , ‘olatheme’ ) ) ; ? >

< ?php echo next_posts_link ( __ ( ‘older posts >’ , ‘olatheme’ ) ) ; ? >

</nav>

</main>

<?php get_footer(); ?>

the_archive_title() and we deleted the code that displays the highlighted section above the page title, and we will apply the same formats to it that we created for the main template file,

After you create and save this file, try displaying, for example, the categories archive page by clicking on the name of one of the categories for the articles displayed on the home page to ensure that WordPress now uses this file to display the archive page.

If we view the categories archive page on the front end, it will look like this:

That’s all you need to know to create archive pages in WordPress. Of course, you can customize the archive page as you want according to your site’s design requirements.

Conclusion

In today’s article, we learned about the concept of archive pages in WordPress, which is an important way to link articles that have a common characteristic on one dedicated page in order to make it easier for users to access all publications that have this characteristic.

We learned how to create archive pages in WordPress automatically based on the publication date, content type, or classification, and how we can customize the way these pages are displayed in several ways, including creating an archive.php file within the template folder to build an archive page that is fundamentally different from the blog page.

Finally, remember that if you want to design the different archive pages in a different way depending on the type of archive, you will of course need to create more customized template files and write the necessary code that specifies what you want to display within each file.

Archives

Categories

Meta

What is the benefit of archive pages on a WordPress website?

How do we customize the way archive pages are displayed on a WordPress site?

Create a special template file with all archive pages archive.php

Conclusion