Pin It
Pages Menu
Categories Menu

Posted by on Mar 4, 2014 in Wordpress Tutorials | 4 comments

How to Create and Display Custom Post Type in WordPress

How to Create and Display Custom Post Type in WordPress

Custom post type is the best functionality WordPress has. Now question is, what is custom post type? WordPress has many default post types as we see on our admin side like Posts, Pages, Revisions, Media and Navigation Menus. We can build our own custom post types and query them on the front-end. In this article, I’ll show you how to create and display custom post types in WordPress.

 

Creating Custom Post Types

We can create as many custom post types as we want like this:

posts

Now I’m creating a custom post type “Test”. My custom post type would be like this:

custom post type

Now I can create my own post panel and add my posts. Now I’m giving you the full code snippet for adding this functionality to your WordPress site. Paste the following code in your functions.php.

[code type=”php”]

<?php

add_action( ‘init’, ‘register_cpt_test’ );
function register_cpt_test() {
$labels = array(
‘name’ => _x( ‘Test’, ‘test’ ),
‘singular_name’ => _x( ‘test’, ‘test’ ),
‘add_new’ => _x( ‘Add New’, ‘test’ ),
‘add_new_item’ => _x( ‘Add New test’, ‘test’ ),
‘edit_item’ => _x( ‘Edit test’, ‘test’ ),
‘new_item’ => _x( ‘New test’, ‘test’ ),
‘view_item’ => _x( ‘View test’, ‘test’ ),
‘search_items’ => _x( ‘Search Test’, ‘test’ ),
‘not_found’ => _x( ‘No test found’, ‘test’ ),
‘not_found_in_trash’ => _x( ‘No test found in Trash’, ‘test’ ),
‘parent_item_colon’ => _x( ‘Parent test:’, ‘test’ ),
‘menu_name’ => _x( ‘Test’, ‘test’ ),
);
$args = array(
‘labels’ => $labels,
‘hierarchical’ => true,
‘description’ => ‘Hi, this is my custom post type.’,
‘supports’ => array( ‘title’, ‘editor’, ‘excerpt’, ‘author’, ‘thumbnail’, ‘trackbacks’, ‘custom-fields’, ‘comments’, ‘revisions’, ‘page-attributes’ ),
‘taxonomies’ => array( ‘category’, ‘post_tag’, ‘page-category’ ),
‘public’ => true,
‘show_ui’ => true,
‘show_in_menu’ => true,
‘menu_icon’ => ‘http://www.google.com’,
‘show_in_nav_menus’ => true,
‘publicly_queryable’ => true,
‘exclude_from_search’ => false,
‘has_archive’ => true,
‘query_var’ => true,
‘can_export’ => true,
‘rewrite’ => true,
‘capability_type’ => ‘post’
);
register_post_type( ‘test’, $args );
}
?>

[/code]

Explanation

Line 3: Adding action of custom post type ‘register_cpt_test‘ into the admin side.

Line 4: Declaring a function register_cpt_test, you change the word ‘test‘ to anything.

Line 5-18: Defining names of post menu items for example, Add New, All Posts. Code is self explanatory.

Line 19-37: Telling WordPress how much functionality we needed in our custom post types. For example, a default post type has revisions, featured image, comments etc etc. As we can tell WordPress, we want this functionality, in my case I’m calling all the functionality. If you will will not add the arguments, you will not get all the options you needed.

How to display custom post types

Displaying custom post types in your pages is same we display our default posts on pages. But for custom post types, we have to define post type by name as you will observe in query_posts() below. Open your index.php file or page template file where you want to show your custom post type and paste the following code:

[code type=”php”]

<?php query_posts( array( ‘post_type’ => array(‘post’, ‘test’) ) ); ?>
<?php while(have_posts()) : the_post(); ?>
<h2><?php the_title(); ?>
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>

[/code]

Explanation

Line 1: Now you have found the way of displaying custom post types, because my custom post type’s name is test, so I called the custom post type by name in query_posts().

Line 2-7: As we always do for displaying our post content, images and titles.

Detail Page for Custom Post Types like single.php

This tutorial is not finished yet, because now we have to create a detail page for custom post types. In WordPress template hierarchy, single.php is the default file for displaying post detail page. But in case of custom post types, it won’t work. We have to create a separate detail page for custom post types. Syntax for creating custom post type single page is:

single-{custom post type name}.php

So, my custom post type’s name is ‘test‘, I will create single-test.php for the detail page. Now we can put the code in our new single file as we do with our default single.php. For querying loop, you won’t have to define ‘query_posts( array( ‘post_type’ => array(‘post’, ‘test’) ) );‘ in your single page. Just loop like default single file. For Example:

[code type=”php”]

<?php if(have_posts()): while(have_posts()): the_post(); ?>

<?php the_title(); ?>

<?php the_content(); ?>

<?php endwhile; endif; ?>

[/code]

If you have any question regarding the tutorial, post the comment.

4 Comments

  1. hi Your post is very nice

    i created single-test.php which contain below code

    =========================================================

    /*—————————————————————————*/

    /*—————————————————————————*/


    =========================================================

    I replaced the following code with your code

    ————————————————————————————-

    ————————————————————————————-

    with

    ————————————————————————————-

    array(‘post’, ‘test’) ) ); ?>

    ————————————————————————————-

    then what happens

    What are the other steps do i need to do

    I googled almost half day nothing found every one describing upto this point after that no one is explaining

    please help me to move forward

    I want to show my custom posts on frontend as blog
    can we add this custom post Type “Test” to menu like categories.

    I would like to display all custom posts called “Test” in one page as blog do. How could i achieve this please help

    Thnks in advance

    • You did wrong.

      You have created a custom post type “Test” and defined “test” as the custom post type slug.

      But you’re trying to display all posts from that custom post type in single-test.php. I said in the article, single-test.php file will just show post detail page, not all the list of posts.

      If you want to display all custom post type on homepage, then open index.php, put

      < ?php query_posts( array( 'post_type' => array(‘post’, ‘test’) ) ); ?>
      < ?php while(have_posts()) : the_post(); ?>

      < ?php the_title(); ?>
      < ?php the_post_thumbnail(); ?>
      < ?php the_content(); ?>
      < ?php endwhile; ?>
      < ?php endif; ?>

      the code will list all custom posts on home page.

      single-test.php will be the detail page of that “Test” custom post type.

      So when you will click on any posts for detail page, WordPress will call single-test.php instead of single.php.

      In single-test.php, you can paste the code from single.php. WordPress will handle all this automatically.

      Hope you will find it useful.

  2. This code displays all post from custom post.
    Now how to display only one selected post with it’s details?
    Please give me the code…..please…

    • If your custom post type name is portfolio, then use query_posts before loop like:

      < ?php query_posts(array( 'post_type' => ‘portfolio’,
      ‘p’ => 10 (this is specific post’s id you want to display)
      ) );
      ?>

      < ?php while (have_posts()) : the_post(); ?>

      “>< ?php the_title(); ?>

      < ?php echo get_the_excerpt(); ?>

      < ?php endwhile;?>

Post a Reply

Your email address will not be published. Required fields are marked *