HowTo: Create A Custom Archive Page Template on WordPress

wordpress custom archive page template

Although WordPress is a popular blogging tool, or I should rather say, a well-known web development platform, (surprisingly) there are certain features that are quite unpopular among WP users. One such feature is the archive template. This is because of the fact that this open-source CMS’s approach with the archive isn’t done in a simple and intuitive way.

In this post, I have tried to make it a bit simple to work with the Archive Page in WordPress. This post will feature a streamlined approach to develop a Custom Archive Page Template that can help keep the posts well organized and easily accessible.

WordPress Archive Page — A Foreword

In the standard WordPress configuration, there are certain pages included in a default theme. Among various page templates, there is an archive page which is quite similar in structure to the index page. The archive pages can be simply defined as index page versions that can filter the published blogs under a particular category like by an author name, in a specific time period, or with certain tags, etc. This helps represent the content in a clutter-free manner and makes the website more legible.

However, by default, the archive links can be represented in WP via a widget. You can allow users to access archives with a breeze through the sidebar where different archive categories can be showcased. Thus, all we need is a page where visitors can easily determine that they are in an archive and suggest some popular content that may interest them.

This can be efficiently accomplished by creating a custom archive page. Let us go over the steps to develop a Custom Archive Page Template in WordPress.

STEP 1: Create a Page Template with a New File
You’ll need a text editor like Notepad++, TextPad, or any other similar program of your choice. Create a new file and name it “archive-page-example.php”. Now, add a comment in this file to define the template name, this will allow WordPress to identify the file as a page template.

For this, use the below-mentioned lines of code.

<?php
/*
Template Name: My First Archive Page Template
*/

STEP 2: Upload the File and Check its Style
Once the archive-page-example.php file is created and the comment is added, upload the file within the theme folder of your website. With this step, your custom page template for archives will be created. Now, to ensure that the style of your page template is the same as the style of your website, you just have to copy and paste the content from the page.php file (that is existing in your theme folder) into the archive-page-example.php file (that has been created in the previous step).

STEP 3: Create a Custom Archive Page Template
Now, to create a new page on your website for a custom archive page, access your Admin Dashboard, browse the Navigation menu and under the Pages tab, click on the Add New button.

Give a suitable name to your page, I named my page as “Custom archive page”.
wordpress custom archive page

On the right side of the screen, there is a Page Attributes meta box. From the drop-down menu, under this meta box, choose the Template option. Now, by browsing the options available under the Template tab, you can view your custom page template “My First Archive Page Template” as named in the comment section of the file that was created in the first step. Simply click on the Save button and then Update the page.

STEP 4: List the Content of the Archive Page into a Custom Page Template
After clicking on the Update button, as mentioned in the previous step, you will get a page featuring your custom archive page template. Since you have not added any content to the page, it will display nothing.

To list your content in the custom page template, you need to do a little coding. Don’t be nervous because it’s not as difficult as you might think.

Here I have included a chunk of code that will showcase 5 posts that have been published on the website. You may take this example into consideration and customize it according to your preference.

<?php
/*
Template Name: My First Archive Page Template
*/
get_header();
?>
<?php
$loop = new wp_Query('post_type=post&posts_per_page=5&offset=-5');

while($loop->have_posts() ) : $loop->the_post();?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header -->

<div class="entry-content">
<?php the_content(); ?>

</div><!-- .entry-content -->

</article><!-- #post-## -->
<?php endwhile; // end of the loop. ?>
<?php get_footer(); ?>

If you want your custom archive page to display something different from the sample above (5 posts), you can edit it (line 8) according to your needs. If you need some help or reference, check out the official WordPress Codex page on WP_Query.

To Conclude
You can enhance the UX of your website by creating a custom archives page template. This will allow your viewers to efficiently go through the available list of posts and find what they’re looking for. You may choose to hire a WordPress developer to get the task efficiently accomplished within a specific time frame. However, this guide offers a stepwise approach that can help you get through it in a simple and easy way.

This is a guest contribution by Sophia Phillips, an expert frond-end & WordPress developer. Currently, she is employed with WordPrax Ltd – PSD to WordPress company that also offers Photoshop conversion services. Sophia has had written numerous articles on WordPress tips and tricks.

This post may contain affiliate links that allow us to earn commissions at no additional cost to you. We are reader-supported so when you buy through the affiliate links, you are also helping or supporting us. 

2 Comments

  1. Great article on how to create an custom archive page. Some users may also want to slightly change certain elements on various archive pages. What you can do is just copy the blogs standard archive page, edit the filename and template header as you specified in the post. this way, the theme’s default css get applied and you can edit some small element, for example removing the sidebar.

Leave a Reply

Your email address will not be published. Required fields are marked *

JaypeeOnline