How to Display Custom Post Type In WordPress

Custom post type in WordPress are the one of most fun thing to work with. Creating a CPT (Custom Post Type) and displaying it requires a little bit of coding knowledge.  Let’s say if you have CPT called Portfolio and you would like to display Portfolio content on separate page having its own style and single page. You can do that easily with this tutorial.

Getting Started

Let’s start with the basics. I am assuming that you have already created a custom post type. If you need to create one you can create it, simply with Custom Post Type UI plugin or you can read this article How To Create Custom Post Type In WordPress to guide you through things.

Now that you have a custom post type and you want to display post type content.  You will have to take the following steps to do it.

Steps to display Custom Post Type (CPT)

1. Create a custom Template
2. Database Query for CPT
3. Create Custom Templates for single page and Archived

Creating a Custom template for Custom Post Type

Access your theme directory using FTP client like FileZilla or use File Manager. Create a new file and name it whatever you like but make sure it is “. php” extension, in this case I am going to name it portfolio.php.

Open portfolio.php file in any code editor or notepad and put these following lines.

/*

Template Name: Portfolio Page

*/

Go to dashboard and create a new page select the template name from page attribute that we just created in portfolio.php

Database Query for Custom Post Type

<?php $loop = new WP_Query( array( 'post_type' => 'portfolio', 'posts_per_page' => -1) ); ?>

 

This line is a query you will need to set argument. you can change ‘post_type’ value ‘portfolio’ to your Custom post type name posts_per_page -1 means it will show all the posts in portfolio CPT.

Here is how the full template with all code looks like.

<?php

/*

Template Name: Portfolio Page

*/

 

get_header();

?>

<div id="primary" class="content-area">

 

<?php $loop = new WP_Query( array( 'post_type' => 'portfolio', 'posts_per_page' => -1, 'category' => 'current' ) ); ?>

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

<div class="portfolio_item">

<div class="portofolio_image">

<a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail();} ?></a>

</div>

<div class="portfolio_title">

<h2><?php echo get_the_title(); ?></h2>

</div>

</div>

<?php endwhile; wp_reset_query(); ?>

 

</div>

Single page and Archived for Custom Post Type 

The benefit of creating a custom template for your CPT is you will be able to design the page differently from your regular posts page.

Create a new file and name it as sinlge-{your-CPT-name}.php. Give me a second to make it clear to you. I had a custom post type called portfolio so in that case my single page for custom post type will be like single-portfolio.php. if you had a Custom post type movie your single page file should be named as single-movie.php and for the archive page it goes same it will be arhived-{your-CPT-name-here}.php.

I hope now you will be able to create Custom Post type in WordPress.  You can read more about post types on WordPress Codex