In the previous article in this series, we’ve created a Custom Post Type, it’s learn how you can display it on your website. Just to recap, we created a custom post type called Podcast, and a custom taxonomy — Podcast Category. In this guide, we will discover 3 ways you can display articles from the Podcast post type on your website. Before trying these methods, make sure you have at least 1 articles published under your CPT. Our WordPress Podcast Themes can work with a custom post type and by using the regular “Posts” type as well!

3 Ways To Display Custom Post Types in WordPress

1. Using the Default Archive Template

In order for this to work, you need to go to Settings->Permalinks, and check what type of link structure you’re using. Chances are you’re using SEO friendly permalinks. From here, you need to navigate to Appearance->Menus, and add a custom link to your navigation.

If you’re on a fresh WordPress installation, your CPT link will look like this: www.example.com/?post_type=podcasts.

But if you changed the permalink structure to display links in more SEO and user friendly manner, your post type URL can look like this: www.example.com/podcasts.

Depending on your setup, you need to get this link, and add it in your menu as a custom link. Change example.com with your website’s name, and podcasts with your CPT name (if they are different). Then, set the name of the menu item to Podcasts, and save/update your menu.

The next time you open your website, you will see Podcasts on your menu. If you click on this link, it will display the articles from Podcasts post type using the default archive.php template.

2. Using Custom Templates for Archive Pages and Single Post Entries

If you don’t like how the default archive.php template displays your Podcast posts, you can create a custom template. All you need to do here, is create a file called archive-podcasts.php in your theme’s directory. If such file exists, WordPress will automatically use this template file when displaying content from your custom post type.

If you open Podcassfrom your menu, you’ll see a blank page, because WordPress loads your custom template — which is currently empty. A good practice is to copy the contents of archive.php into your new file, and start making modifications from there.

Another thing you can do, is to create a custom template for your single entries. By default, WordPress uses single.php to display single entries on the front-end.

Similarly, you can create a file called single-podcasts.php to display your single articles from Podcast CPT in a different way. This comes in handy when you have custom fields or taxonomies. To get started, you can copy the contents from single.php and start making changes per your needs.

3. Querying Custom Post Types on the Landing Page Alongside Regular Posts

A more advanced approach when dealing with custom post types, is to display them alongside other types of content on your front page. In our example, this would mean to display podcast and blog posts together on the landing page.

By default, WordPress uses a template file called index.php (if there’s no front-page.php or home.php) to display posts on the landing page. We can modify our theme’s index.php, and make it load our Podcast post type by creating an additional query to the database.

This is an example of how a simple index.php file would look like, and what changes we can apply to it to reach our goal:

<?php get_header(); ?>
<div id="primary" class="content-area">
	<main id="main" class="site-main" role=“main”>
		<?php if (have_posts()) : ?>
			<?php while (have_posts() : the_post());
				// This is the main WordPress loop which loads the default “blog” posts. As an example, we will display only the article’s title.
				echo the_title();
			endwhile; ?>
		<?php endif; ?>

You need to add the following piece of code after the main WordPress loop in your index.php file.

		// Display Podcasts CPT
		<?php 
			$args = array(‘post_type’ => ‘podcasts’, ‘posts_per_page’ => ‘3’);
			$myQuery = new WP_Query($args);
		?>
		<?php if ($myQuery->have_posts() : ?>
			<?php while ($myQuery->have_posts() : $myQuery->the_post(); ?>
				<?php // Dislpay the podcast title
				echo the_title(); ?>
			<?php endwhile;  wp_reset_postdata(); ?>
		<?php endif; ?>
	</main>
</div>

This is how we query the WordPress the database, and load articles from custom post types on the landing page. Two things are important here:
1. Make sure to use the “=>” symbol when creating the $args array for the WP_Query object. Use “->” symbol when trying to call a function of a class like this: $myQuery->have_posts().
2. Make sure to call the wp_reset_postdata() function after the endwhile; statement. This function restores the global $post variable of the main query after a secondary query loop has been executed. More info on this function can be found here.

Note: If you’re making modifications to existing files, or creating new ones, it’s always good to make those changes from a child theme. This way, when the theme updates, you get to keep all your changes.