When you are building a WordPress Theme, you have the option of adding a file named archive.php to your theme. It is optional because if you don’t have it, then the index.php will handle the output of archive type posts. Now as a refresher, an archive page in WordPress is referring to a collection of posts grouped by category, author, date, tag, etc. In this tutorial, we will now add an archive.php page to our theme so that we can customize the look of various archive types on our site.
index.php and archive.php
In our last tutorial about Post Meta in WordPress, we we’re able to use some helpful WordPress functions to output links to the category archives, author archives, and date archives. As we know, we didn’t actually set up a specific archive file to handle those links for us. It turns out, that out of the box, WordPress has a mechanism to display archive type pages, even if you do not yet have an archive.php file. This way, those links we created still work. In this approach however, all of your various archive types will look the same.
Adding archive.php to your theme
We can help WordPress out with the task of displaying archives by creating our own archive.php file as part of our theme. In this file, we can set up various options to display information about the posts differently, depending on what type of archive it is. Go ahead and create a new archive.php file in your theme folder. At this point, you can leave it blank. Just to show that the archive.php has now taken over for index.php, we can visit our archive links and notice that those pages are no longer outputting any information.
What code do I put in archive.php?
You might be thinking, well at least before I was getting information about my posts to the screen when there was no archive.php file. That’s a valid point. To quickly get started with your archive.php file, you can go ahead and just copy and paste the code from index.php right into archive.php. Now, the behavior of clicking on links to archive pages will work just like it did before. The only difference is that archive.php will now be handling the heavy lifting for you rather than index.php.
Customizing archive.php
We can now add some code to our archive.php page so that when a site visitor visits an archive, they will see that reflect on the screen. In the snippet below, we drop out of php add some heading level two text to indicate an archive page, and then re enter php.
<?php
get_header();
if ( have_posts() ) :
?>
<h2>Archive Page</h2>
<?php
while ( have_posts() ) : the_post(); ?>
<article class="post">
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
| <?php
$categories = get_the_category();
$comma = ', ';
$output = '';
if ( $categories ) {
foreach ( $categories as $category ) {
$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
}
echo trim( $output, $comma );
} ?>
</p>
<?php the_content() ?>
</article>
<?php endwhile;
else :
echo '<p>There are no posts!</p>';
endif;
get_footer();
?>With this small change in place, users will now know if they are viewing an archive page. We can test this out now. If we are on the homepage or viewing a specific blog post, we should not see ‘Archive Page’. If we are on an author or category page however, we should in fact see the text of ‘Archive Page’.
From static output to conditional output in archive.php
We now have the general purpose of our archive.php file working. It is doing it’s job by providing an indication to the user that they are viewing an archive page. There are different types of archives however. Should we now create new files to handle different types of archives? No, not at all. We can add conditional logic to our archive.php file so that if a user is visiting a category archive, they will see that on the screen. If they are visiting an author archive, they will also see that on the screen.
How to use the is_category() function
We can start customizing archive.php by first working on the category archives. To do this, we will make use of a helpful WordPress function named is_category(). This function can do many things depending on the arguments that you pass to it. In it’s most simple form however, it simply returns true if we are on a category archive page or false if we are not. Let’s update that code in archive.php like so:
<?php
get_header();
if ( have_posts() ) :
?>
<h2><?php
if ( is_category() ) {
echo 'Category Archive';
}
?></h2>
<?php
while ( have_posts() ) : the_post(); ?>
<article class="post">
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
| <?php
$categories = get_the_category();
$comma = ', ';
$output = '';
if ( $categories ) {
foreach ( $categories as $category ) {
$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
}
echo trim( $output, $comma );
} ?>
</p>
<?php the_content() ?>
</article>
<?php endwhile;
else :
echo '<p>There are no posts!</p>';
endif;
get_footer();
?>Visiting a category page now shows the visitor that they are on a category archive. Notice that the URL contains /category/javascript/ and the output to the screen says ‘Category Archive’.
How to use the is_tag() function
Just like we did with the category scenario, we can check to see if we are viewing a tag archive by making use of the is_tag() function. We can add an elseif condition to our if statement to handle this like so:
<?php
if ( is_category() ) {
echo 'Category Archive';
} elseif ( is_tag() ) {
echo 'Tag Archive';
}
?>In the WordPress Dashboard, we can go ahead and assign a tag of es6 to our JavaScript post so that we can test this out. With that in place, let’s go ahead and visit http://wordpresstutorial.dev/tag/es6/ to see if we see what we expect. Then we will click over to a category link and see if the text on the page updates properly.
Making the category and tag archive output dynamic
So far we are manually outputting a string of text based on whether the current query is a category or tag. Instead of this, we can use the single_cat_title() and single_tag_title() functions to dynamically output the correct category or tag archive that we are viewing. Now each of these functions can accept a string as an argument that acts as the prefix to the text that gets output by the function. So let’s set up our code now as follows:
<?php
if ( is_category() ) {
single_cat_title( 'Category Archive: ' );
} elseif ( is_tag() ) {
single_tag_title( 'Tag Archive: ' );
}
?>Browsing between category and tag archives is now much more intuitive to the user.
Setting up author archives
To set up the author archives, we can use the functions of is_author(), the_post(), get_the_author(), and rewind_posts(). Let’s see how.
<?php
if ( is_category() ) {
single_cat_title( 'Category Archive: ' );
} elseif ( is_tag() ) {
single_tag_title( 'Tag Archive: ' );
} elseif ( is_author() ) {
the_post();
echo 'Author Archives: ' . get_the_author();
rewind_posts();
}
?>We can go ahead and click on ‘Tom’ to see his archives now. Looks good!
Adding Time Based Archives
We can also add archives based on the day, month, or year. To accomplish this we can use the functions of is_day(), is_month(), is_year(), and get_the_date(). Here we go:
<?php
if ( is_category() ) {
single_cat_title( 'Category Archive: ' );
} elseif ( is_tag() ) {
single_tag_title( 'Tag Archive: ' );
} elseif ( is_author() ) {
the_post();
echo 'Author Archives: ' . get_the_author();
rewind_posts();
} elseif ( is_day() ) {
echo 'Daily Archives: ' . get_the_date();
} elseif ( is_month() ) {
echo 'Monthly Archives: ' . get_the_date( 'F Y' );
} elseif ( is_year() ) {
echo 'Yearly Archives: ' . get_the_date( 'Y' );
}
?>These archives are now working very nicely.
Daily Archives
Monthly Archives
Yearly Archives
Adding a fall through else
It is a good idea to add a final else clause to our elseif chain. If nothing matches as the code goes through each condition, then we need a default state. This is very easy to add. We can do so just like this:
<?php
if ( is_category() ) {
single_cat_title( 'Category Archive: ' );
} elseif ( is_tag() ) {
single_tag_title( 'Tag Archive: ' );
} elseif ( is_author() ) {
the_post();
echo 'Author Archives: ' . get_the_author();
rewind_posts();
} elseif ( is_day() ) {
echo 'Daily Archives: ' . get_the_date();
} elseif ( is_month() ) {
echo 'Monthly Archives: ' . get_the_date( 'F Y' );
} elseif ( is_year() ) {
echo 'Yearly Archives: ' . get_the_date( 'Y' );
} else {
echo 'Archives: ';
}
?>Changing the_content() to the_excerpt()
When a visitor is viewing an archive page, it should really be considered a secondary form of content. It is not the primary focus of a current blog post for example. So instead of outputting the entire post on archive pages, maybe it makes sense to simply output the excerpt of the post using the the_excerpt() function. We can add that now. Here is the final code markup of our example archive.php page.
archive.php
<?php
get_header();
if ( have_posts() ) :
?>
<h2><?php
if ( is_category() ) {
single_cat_title( 'Category Archive: ' );
} elseif ( is_tag() ) {
single_tag_title( 'Tag Archive: ' );
} elseif ( is_author() ) {
the_post();
echo 'Author Archives: ' . get_the_author();
rewind_posts();
} elseif ( is_day() ) {
echo 'Daily Archives: ' . get_the_date();
} elseif ( is_month() ) {
echo 'Monthly Archives: ' . get_the_date( 'F Y' );
} elseif ( is_year() ) {
echo 'Yearly Archives: ' . get_the_date( 'Y' );
} else {
echo 'Archives: ';
}
?></h2>
<?php
while ( have_posts() ) : the_post(); ?>
<article class="post">
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
| <?php
$categories = get_the_category();
$comma = ', ';
$output = '';
if ( $categories ) {
foreach ( $categories as $category ) {
$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
}
echo trim( $output, $comma );
} ?>
</p>
<?php the_excerpt() ?>
</article>
<?php endwhile;
else :
echo '<p>There are no posts!</p>';
endif;
get_footer();
?>When we now view an archive page, we see the excerpt rather than the full post. In addition, at the end of the excerpt there is a […] symbol to indicate that there is more to read.
What Is A WordPress Archive Page Summary
Archive pages begin to get more important as you add more posts, pages, and content to your WordPress powered website. As we saw, WordPress handles the output of archive information automatically for you even if there is no archive.php file in your theme. In that case, WordPress will simply make use of the index.php file to display basic information about your website archives. Rather than display the same layout and output for all of the different types of archives however, we took a look at how to customize the output displayed on archive pages based on the type of archive being viewed. Creating your own archive page for your WordPress Theme can be very useful!
