Creating a Custom Archive Page for a Custom Post Type in WordPress

Often times when dealing with custom post types you’ll want to customize the look of the archive page. All WordPress themes come with a default archive template file called archive.php and its located in the root of the theme folder. Some themes also separate archive content even further by breaking single parts up into individual template parts. This is generally a good idea and follows WordPress best practices.

Creating A Custom Post Type Archive Template File

Start by creating a file called archive-<post_type_name>.php inside your themes root folder. For our example, we’ll use our custom post type called team_member. Yours will be the name that was used in the register_post_type() call for your particular custom post type.

<!-- Filename: archive-team_member.php -->
<?php get_header(); if (have_posts()): ?>

<h1>Our Team</h1>
<div class="team-members">
<?php while (have_posts()): the_post(); ?>
  <div class="team-member">
    <div class="team-member-image"><?php echo get_the_post_thumbnail(); ?></div>
    <div class="team-member-title"><?php the_title('<h4>', '</h4>'); ?></div>
    <div class="team-member-bio"><?php the_content(); ?></div>
  </div>  
<?php endwhile; ?>
</div>

<?php endif;

get_footer();

Next let’s add some basic CSS styling, not forgetting our responsive duties to the world, by adding the following styles. You can easily add them in the Additional CSS area of the WordPress customizer (Apperance > Customizer).

.team-members {
  padding: 20px;
}

.team-member {
  display: block;
  float: left;
  width: 25%;
}

.team-member div {
	padding: 20px;
}

@media (max-width:1200px) {
  .team-member {
    float: left;
    width: 50%;
  }  
}

@media (max-width:600px) {
  .team-member {
    float: none;
    width: 100%;
  }  
}

Here is the end result from our team member custom post type example:

As you can see, it’s really easy to create a custom archive template for your custom post types. In a future tutorial, I’ll show you how you can make a custom page for your custom post types. Happy WordPressing.