Wordpress Archive Template

admin 11/23/2021
31 Comments
If I were to ask you what the least used default page type in WordPress is, chances are you’d say the archive template. Or, more likely, you’d probably not even think of the archive template at all — that’s how unpopular it is. The reason is simple. As great as WordPress is, the standard way in which it approaches the archive is far from user-friendly.

Queryposts is a way to alter the main query that WordPress uses to display posts. It does this by putting the main query to one side, and replacing it with a new query. To clean up after a call to queryposts, make a call to wpresetquery, and the original main query will be restore. Template files are made up of HTML, PHP, and WordPress Template Tags. Let's look at the various templates that can be defined as part of a Theme. WordPress allows you to define separate templates for the various aspects of your site. It is not essential, however, to have all these different template files for your site to fully function.

If I were to ask you what the least used default page type in WordPress is, chances are you’d say the archive template. Or, more likely, you’d probably not even think of the archive template at all — that’s how unpopular it is. The reason is simple. As great as WordPress is, the standard way in which it approaches the archive is far from user-friendly.

Let’s fix that today! Let’s build an archive page for WordPress that’s actually useful. The best part is that you will be able to use it with any modern WordPress theme installed on your website at the moment.

Further Reading on SmashingMag:

But first, what do we mean by “archive page” exactly?

The Story Of WordPress Archives

In WordPress, 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 (our hero today),
  • 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 idea behind such an archive structure is to provide the blog administrator with a way to showcase the archive based on various criteria, but to do so in a simplified form. At the end of the day, these various archive pages are just versions of the index page that filter content published during a specific time period or by a particular author or with particular categories or tags.

While this sounds like a good idea from a programmer’s perspective, it doesn’t make much sense from the user’s point of view. Or, more accurately, one layer is missing here — a layer that would come between the user’s intent to find content and the individual items in the archive themselves.

Here’s what I mean. Right now, 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 A Custom Archives Page In WordPress

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.

That being said, we do have to start by using some theme as the base of our work here. I’ll use Zerif Lite. I admit, I may be a bit biased here because it is one of our own themes (at ThemeIsle). Nonetheless, it was one of the 10 most popular themes released last year in WordPress’ theme directory, so I hope you’ll let this one slide.

And, hey, if you don’t like the theme, no hard feelings. You can use the approach presented here with any other theme.

Wordpress Archive Template Category

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, starting with the page.php file of the Zerif Lite theme, 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

For this, we’ll do some manual PHP coding. Even though displaying this could be achieved through various widgets, let’s keep things diverse and get our hands a bit dirty just to show more possibilities.

You’re probably asking why the arbitrary number of 15 posts? Well, I don’t have a good reason, so let’s actually make this configurable through custom fields.

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):

We’ll discuss the styles in just a minute. Right now, please note that everything is done through a wp_list_authors() function call.

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:

This time, we’re displaying this as a single paragraph, with entries separated by a pipe ( ).

(Smashing Magazine already has a really good tutorial on how to customize individual archive pages for categories, tags and other taxonomies in WordPress.)

The Complete Archive Page Template

OK, 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:

This is mostly typography and not a lot of structural elements, except for the couple of float alignments, plus the responsive design block at the end.

OK, let’s see the result! Here’s what it looks like on a website that already has quite a bit of content in the archive:

How To Integrate This Template With Any Theme

Custom

The custom archive page we are building here is for the Zerif Lite theme, in the official WordPress directory. However, like I said, it can be used with any theme. Here’s how to do that:

  1. 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.
  2. Edit the functions.php file of your theme and add this line at the very end: require get_template_directory() . '/archives-page-functions.php';.
  3. 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 */.
  4. 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.
  5. Test and enjoy.

Here’s what it looks like in the default Twenty Fifteen theme:

What’s Next?

We’ve covered a lot of ground in this guide, but a lot can still be done with our archive page. We could widgetize the whole thing and erase all of the custom code elements. We could add more visual blocks for things like the latest content, and so on.

The possibilities are truly endless. So, what would you like to see as an interesting addition to this template? Feel free to share.

Explore more on

Sets up The Loop with query parameters.

Contents

  • Usage
  • Caveats
  • Related

Description Description

Note: This function will completely override the main query and isn’t intended for use by plugins or themes. Its overly-simplistic approach to modifying the main query can be problematic and should be avoided wherever possible. In most cases, there are better, more performant options for modifying the main query such as via the ‘pre_get_posts’ action within WP_Query.

This must not be used within the WordPress Loop.

Parameters Parameters

$query

(arraystring)(Required)Array or string of WP_Query arguments.

Return Return

(WP_Post[] int[]) Array of post objects or post IDs.

More Information More Information

Wordpress Custom Archive Template

query_posts() is a way to alter the main query that WordPress uses to display posts. It does this by putting the main query to one side, and replacing it with a new query. To clean up after a call to query_posts, make a call to wp_reset_query(), and the original main query will be restored.

It should be noted that using this to replace the main query on a page can increase page loading times, in worst case scenarios more than doubling the amount of work needed or more. While easy to use, the function is also prone to confusion and problems later on. See the note further below on caveats for details.

For general post queries, use WP_Query or get_posts().

It is strongly recommended that you use the ‘pre_get_posts’ action instead, and alter the main query by checking is_main_query().

For example, on the homepage, you would normally see the latest 10 posts. If you want to show only 5 posts (and don’t care about pagination), you can use query_posts() like so:

Here is similar code using the ‘pre_get_posts’ action in functions.php :

Usage Usage

Place a call to query_posts() in one of your Template files before The Loop begins. The WP_Query object will generate a new SQL query using your parameters. When you do this, WordPress ignores the other parameters it receives via the URL (such as page number or category).

Preserving Existing Query Parameters Preserving Existing Query Parameters

If you want to preserve the original query parameter information that was used to generate the current query, and then add or over-ride some parameters, you can use the $query_string global variable in the call to query_posts().

For example, to set the display order of the posts without affecting the rest of the query string, you could place the following before The Loop:

When using query_posts() in this way, the quoted portion of the parameter must begin with an ampersand (&).

Or alternatively, you can merge the original query array into your parameter array:

Combining Parameters Combining Parameters

You may have noticed from some of the examples above that you combine parameters with an ampersand (&), like so:

Posts for category 13, for the current month on the main page:

At 2.3 this combination will return posts belong to both Category 1 AND 3, showing just two (2) posts, in descending order by the title:

The following returns all posts that belong to category 1 and are tagged “apples”.

You can search for several tags using “+”. In this case, all posts belong to category 1 and tagged as “apples” and “oranges” are returned.

Caveats Caveats

query_posts() is only one way amongst many to query the database and generate a list of posts. Before deciding to use query_posts(), be sure to understand the drawbacks.

Alters Main Loop Alters Main Loop

query_posts() is meant for altering the main loop. It does so by replacing the query used to generate the main loop content. Once you use query_posts(), your post-related global variables and template tags will be altered. Conditional tags that are called after you call query_posts() will also be altered – this may or may not be the intended result.

Secondary Loops Secondary Loops

To create secondary listings (for example, a list of related posts at the bottom of the page, or a list of links in a sidebar widget), try making a new instance of WP_Query or use get_posts().

If you must use query_posts(), make sure you call wp_reset_query() after you’re done.

Pagination Pagination

Wordpress Tag Archive Template

Pagination won’t work correctly, unless you set the ‘paged’ query var appropriately: adding the paged parameter

Additional SQL Queries Additional SQL Queries

If you use query_posts within a template page, WordPress will have already executed the database query and retrieved the records by the time it gets to your template page (that’s how it knew which template page to serve up!). So when you over-ride the default query with query_posts(), you’re essentially throwing away the default query and its results and re-executing another query against the database.

This is not necessarily a problem, especially if you’re dealing with a smaller blog-based site. Developers of large sites with big databases and heavy visitor traffic may wish to consider alternatives, such as modifying the default request directly (before it’s called). The ‘request’ filter can be used to achieve exactly this.

The ‘parse_query’ and the ‘pre_get_posts’ filters are also available to modify the internal $query object that is used to generate the SQL to query the database.

Resources Resources

  • For more in-depth discussion of how WordPress generates and handles its queries, review these articles: Query Overview and Custom Queries
  • Customize the Default Query properly using ‘pre_get_posts’ – Bill Erickson – Customize the WordPress Query or John James Jacoby – Querying Posts Without query_posts
  • You don’t know Query – Slides from WordCamp Netherlands 2012 by Andrew Nacin

Source Source

File: wp-includes/query.php

Free Templates For Wordpress

View on Trac

Archive Posts In Wordpress

Related Related

Wordpress Archive Template For Custom Taxonomy

Uses Uses

Archive Wordpress Site

Uses
UsesDescription
wp-includes/class-wp-query.php:WP_Query::__construct()

Constructor.