Why We Need the Archive Page
In WordPress Themes, you get to work with a range of different page templates and structures in the standard configuration. Looking at the directory listing of the default theme at the time of writing, Twenty Fifteen, we find the following:
404 error page,
archive page
image attachments page,
index page (the main page),
default page template (for pages),
search results page,
single post and attachment pages.
Despite their different purposes, all of these pages are really similar in structure, and they usually only differ in a couple of places and several lines of code. In fact, the only visible difference between the index page and the archive page is the additional header at the top, which changes according to the particular page being viewed.
The only built-in way to showcase the archive links on a WordPress website is with a widget. So, if you want to allow visitors to dig into the archive in any clear way, you’d probably have to devote a whole sidebar just to the archive (just to be able to capture different types of organization, such as a date-based archive, a category archive, a tag archive, an author archive and so on).
So, what we really need here is a middleman, a page that welcomes the visitor, explains that they’re in the archive and then points them to the exact piece of content they are interested in or suggests some popular content.
That is why we’re going to create a custom archive page.
How To Build It
Here’s what we’re going to do in a nutshell. Our custom archive page will be based on a custom page template. This template will allow us to do the following:
include a custom welcome message (may contain text, images, an opt-in form, etc. — standard WordPress stuff);
list the 15 latest posts (configurable);
display links to the author archive;
display links to the monthly archive;
add additional widget areas (to display things like the most popular content, categories, tags).
Lastly, the page will be responsive and will not depend on the current theme of the website it’s being used on. You can use the approach presented here with any other wordpress themes.
Getting Started With The Main File
The best model on which to build your archive page is the page.php file of your current theme, for a couple of reasons:
Its structure is already optimized to display custom content within the main content block.
It’s probably one of the simplest page templates in your theme’s structure.
Therefore, I’m going to make a copy and call it tmpl_archives.php.
(Make sure not to call your page something like page-archives.php. All file names starting with page- will be treated as new page templates within the main file hierarchy of WordPress themes. That’s why we’re using the prefix tmpl_ here.)
Next, all I’m going to do is change one single line in that file:
We’ll change that to this:
All this does is fetch the right content file for our archive page.
If you want, you could remove other elements that seem inessential to your archive page (like comments), but make sure to leave in all of the elements that make up the HTML structure. And in general, don’t be afraid to experiment. After all, if something stops working, you can easily bring back the previous code and debug from there.
Also, don’t forget about the standard custom template declaration comment, which you need to place at the very beginning of your new file (in this case, tmpl_archives.php):
After that, what we’re left with is the following file structure (with some elements removed for readability.
Next, let’s create the other piece of the puzzle — a custom content file. We’ll start with the content-page.php file by making a copy and renaming it to content-tmpl_archives.php.
In this file, we’re going to remove anything that’s not essential, keeping only the structural elements, plus the basic WordPress function calls:
The placeholder comment visible in the middle is where we’re going to start including our custom elements.
ADDING A CUSTOM WELCOME MESSAGE
This one’s actually already taken care of by WordPress. The following line does the magic:
ADDING NEW WIDGET AREAS
Let’s start this part by setting up new widget areas in WordPress using the standard process. However, let’s do it through an additional functions file, just to keep things reusable from theme to theme.
So, we begin by creating a new file, archives-page-functions.php, placing it in the theme’s main directory, and registering the two new widget areas in it:
Next, we’ll need some custom styling for the archive page, so let’s also “enqueue” a new CSS file:
This is a conditional enqueue operation. It will run only if the visitor is browsing the archive page.
Also, let’s not forget to enable this new archives-page-functions.php file by adding this line at the very end of the current theme’s functions.php file:
Finally, the new block that we’ll use in our main content-tmpl_archives.php file is quite simple. Just place the following right below the call to the_content();:
All that’s left now is to take care of the only missing file, archives-page-style.css. But let’s leave it for later because we’ll be using it as a place to store all of the styles of our custom archive page, not just those for widgets.
LISTING THE 15 LATEST POSTS
Here’s how we’re going to do it:
Setting the number of posts will be possible through the custom field archived-posts-no.
If the number given is not correct, the template will default to displaying the 15 latest posts.
Below is the code that does this. Place it right below the previous section in the content-tmpl_archives.php file, the one that handles the new widget areas.
Basically, all this does is look at the custom field’s value, set the number of posts to display and then fetch those posts from the database using WP_Query();. I’m also using some Font Awesome icons to add some flare to this block.
DISPLAYING LINKS TO THE AUTHOR ARCHIVES
(This section is only useful if you’re dealing with a multi-author blog. Skip it if you are the sole author.)
This functionality can be achieved with a really simple block of code placed right in our main content-tmpl_archives.php file (below the previous block):
DISPLAYING LINKS TO THE MONTHLY ARCHIVES
I’m including this element at the end because it’s not the most useful one from a reader’s perspective. Still, having it on your archive page is nice just so that you don’t have to use widgets for the monthly archive elsewhere.
Here’s what it looks like in the content-tmpl_archives.php file:
THE COMPLETE ARCHIVE PAGE TEMPLATE
Just for clarity, let’s look at our complete content-tmpl_archives.php file, which is the main file that takes care of displaying our custom archive:
THE STYLE SHEET
Lastly, let’s look at the style sheet and, most importantly, the effect it gives us.
Here’s the archives-page-style.css file:
How To Integrate This Template With Any Theme
Take the archives-page-style.css file and the archives-page-functions.php file that we built here and put them in your theme’s main directory.
Edit the functions.php file of your theme and add this line at the very end: require get_template_directory() . '/archives-page-functions.php';.
Take the page.php file of your theme, make a copy, rename it, change the get_template_part() function call to get_template_part( 'content', 'tmpl_archives' );, and then add the main declaration comment at the very beginning: /* Template Name: Archive Page Custom */.
Take the content-page.php file of your theme, make a copy, rename it to content-tmpl_archives.php, and include all of the custom blocks that we created in this guide right below the the_content(); function call.
Test and enjoy.
At last, I will show you what it looks like in the default Twenty Fifteen theme: