Display Custom Post Types Content in WordPress Templates

We need to create few templates to display custom post types content in WordPress. In the previous article, we have created few posts in our Books post types with some custom content fields. Here I will update you how to display those custom content using separate templates in WordPress for the custom post type.

Here you will know WordPress templates hierarchy as well as how to display custom content there. We have created those content using Advanced Custom Fields plugin. This is the 5^th article of our series on Custom Post Types (CPT). The topics before and after this article are:

Adding custom fields to CPT

Create templates to display custom post types content

Exporting custom taxonomies/fields & further reading

WordPress Templates Hierarchy and CPT

First, you must know what kind of templates are required to show custom content. if we create our CPT with the parameter has_archive set to either true or a string, then it will display all books in an archive page. The WP hierarchy is an order to pick a matching template here.

For the custom post type, it will look for:

archive-{post_type}.php and
single-{post_type}.php

If these templates are not present in the theme, then it will look for the general templates:

archive.php and
single.php

Even if these templates are not defined then the index.php is the default one to use. So, templates for the book post type will be archive-book.php and single-book.php.

Two Notes to Display Custom Post Types Content

The list of books will be displayed on the book archive page, and that will be located on this page:

http://your-domain.com/?post_type=book

If you have the pretty permalinks enabled, then you can also access the page with this URL:

http://your-domain-goes-here.com/books

The first thing to note is that the pretty URL above has the plural form of the post type. We used a singular word (book) in the register_post_type() function which is the identifier for the post type. Further, the has_archive parameter allows us to customize the slug of the archive page by passing a string to it.

We have passed books there so the archive page URL is different and in plural form. Instead, if you pass true there then it will be the same as the slug key in rewrite parameter. It’s your choice to select the name and slug of CPT, just keep this concept in the mind. In addition, you’re free to use a plural word for the post type. Moreover, WordPress itself uses single words for them.

Second, if you’re using taxonomies and terms in your custom post types then different templates might require. According to WordPress documentation on templates hierarchy, the order is:

taxonomy-{taxonomy}-{term}.php
taxonomy-{taxonomy}.php
tag-{slug}.php
tag-{id}.php
category-{slug}.php
category-{ID}.php

So if you have Genre (genre) taxonomy and Fiction (fiction) term in book post type, then you can create the following templates as per requirements:

taxonomy-genre-fiction.php
taxonomy-genre.php

Templates to Display Custom Post Types Content

The best way to create a new template file is copy code from existing similar template in the theme. Then paste in a new PHP file and save it as the template name discussed above. Finally, modify the code carefully and save changes.

So you have to create the single-book.php template to display single post of the book post type. Similarly, you can create archive-book.php to show the list of book posts. Also, if you require modifications in taxonomies or terms related templates, use the specific template as already described.

I’m here updating you with functions to display ISBN, Price and Publisher custom fields in templates. As we have created those fields using Advanced Custom Fields plugin previously here.

<?php 
	// Display isbn field if exists	
	if( get_field('isbn') ): 
?>	

		<h2><?php the_field('isbn'); ?></h2>
        	
<?php endif; ?>



<?php 
	// Display price field if exists
	$price = get_field('price');
	
	if( $price ): ?>	

		<h2>Price: <?php echo round($price, 2); ?></h2>
        	
<?php endif; ?>

This is the simplest form to display custom fields created using ACF plugin. You can read more about available features and functions at ACF documentation.

How to Query Custom Post Types

Sometimes you just need to retrieve items from the custom post type, like to use in a widget. You can use the WP_Query class to fetch the CPT and loop through to display them. The following example below shows titles from the book post type in an unordered list.

<?php 
	$args = array( 'post_type' => 'book', 'posts_per_page' => 10 );
	
	$the_query = new WP_Query( $args ); 
	
	if ( $the_query->have_posts() ) :
?>

	<ul>	
    
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>		
	
    <li><?php the_title(); ?></li>

<?php 
	
	endwhile;
	
	wp_reset_postdata(); 
?>
	</ul>
<?php endif; ?>

So the above is the explanation of how to display custom post types content using templates in WordPress. It’s all about custom post types and custom content or fields. The last article focuses further reading and recommendations, renaming CPT and backup topic.