Creating WordPress Custom Post Archives

Creating Custom Post Archives without Coding

This tutorial explains how to design custom post archives using PHP and WordPress templates.

You can also create custom post archives without writing any code using Views plugin.

Custom post archives are the standard method that WordPress uses to display custom content. We will show how to customize these archives using PHP and with Views plugin without coding.

Jump directly to learn how to customize custom post archives without coding »

Introduction to WordPress Custom Post Archives

Custom Post Archives list your custom content. You probably already know the standard WordPress archives. A good example is the blog home, author pages and search results. While the standard archives list the standard content types, custom post archives will list your custom content.

You can create individual templates for custom post archives. These templates can include any field. For example, let’s create a custom post type named “bios”, that hold biographies.

Bios custom post type in Types admin

The “bios” custom post archive will display a list of these biographies.

Accessing the post type archive URL

To easily manage custom post type archives; it is recommended that you use an appropriate permalink setting in your website.

  1. Login to your WordPress admin.
  2. Go to Settings -> Permalinks.
  3. And under Common Settings, let’s use Post name.

WordPress Permalink structure

  1. Then click ‘Save Changes’
  2. Now open any custom post type in the browser. You should see the URL in the form of:

http://mywebsite.com/post-type/post-slug/

Example:

http://mywebsite.com/bios/mr-x/

  1. The archive URL of your custom post type takes the form of:

http://mywebsite.com/post-type/

So in the above example, it will be:

http://mywebsite.com/bios/

Customizing custom post archives using template files

By default, WordPress uses the ‘archive.php’ template to display custom post archives. To customize the content and appearance of the archives for your custom post types, you can create similar PHP template files.

Here are the steps to creating your own archive template files:

1. Copy archive.php to archive-{posttype_slugname}.php

To save time, we will use the standard archive.php template as the basis. We will copy it to our custom archive file and edit. This way, we don’t need to write our entire archive file from scratch.

Locate the file archive.php in your theme and copy it to archive-{posttype_slugname}.php.

The name of the archive file tells WordPress for which post type is used. In our ‘bios’ example; the template file will be:

archive-bios.php

You can see the slug value in the custom post type edit screen in Types. It appears in the screenshot above.

Save your new archive page in the same directory where you found the original archive.php file.

Once you have saved your custom archive template. WordPress will use that whenever visitors go to that custom post archive page.

2. Edit your custom archive template and customize it

One of the most important functions that you can use is the is_post_type_archive(). This is a conditional tag to check if the query is for the post archive page.

Example – Customize the H1 header for custom post archives

The default WordPress theme will output the text ‘Custom Post Archive’ for your custom archive pages. Obviously, you want to change this and write something that describes your content better.

To output unique texts in the H1 tag for different archives, we can use conditional logic. The code below will check the kind of archive we are displaying.

Using a customized header H1 tag text for your custom post archive
<h1 class="page-title">
<?php 
if (is_post_type_archive()) {
//display H1 for post type archive
echo "Biography list for this website";                    	
} elseif (is_day()) {
echo "Daily archives";
} elseif (is_month()) {
echo "Monthly archives";                    	
} elseif (is_year()) {
echo "Yearly archives";
} else {
echo "Blog archives";
}
?>
</h1>

So if this is a biographical archive, it will display: “Biography list for this website“.

This example can be extended to other advanced methods. For example, to control the loops and display your archive content.

Example – Adding custom fields to custom post archives

The next thing that you’ll probably want to do is display custom fields in your custom post archive output.

Types make this easy, by using the types_render_field call from Types PHP API.

Let’s have an example using TwentyEleven theme.

TwentyEleven uses get_template_part in returning archive content
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php

//This will return the content of the CPT archive

get_template_part( 'content', get_post_format());					

?>
<?php endwhile; ?>

The get_template_part ‘content’ argument refers to the content.php of TwentyEleven theme. Open this template.

Code for returning the archive content
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav"></span>', 'twentyeleven' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div>

To display custom field values, simply insert Types render field in the above existing code, for example:

Displaying custom fields using Types render field in archives
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav"></span>', 'twentyeleven' ) ); ?>
			
<?php 
//Display the contact number of the invoice
			
echo "Contact number: ".types_render_field("contactnumber", array("output"=>"HTML"));
			
?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div>

The above example displays the contact number custom field under the invoice content. This is how it looks like:

Custom field display in archives


Customizing Custom Post Archives with WordPress Archives

Blog page displaying as a grid

Views plugin lets you take total control over custom post archives. You do not need to write any PHP code. You will be able to include custom fields and taxonomy. You can also control the look and feel of your site.

Using WordPress Archives, you will:

  1. Choose which WordPress archive to customize
  2. Select the layout for the archive page
  3. Select which fields to include for each item in the list

You can use WordPress Archives for custom post archives, as well as for the blog page, author archives, date archives and even search results.

To learn more, read about using WordPress Archives. You can experiment and learn this for free on our Discover WP, or jump in and buy Toolset and start using on your own sites.