Displaying WordPress 3.x Custom Post Types on a Page Other than Home

If you’ve ever used WordPress, you know that all of your posts appear on your home page. This is the default behavior for WordPress. You can create content pages for details like an About page or Contact Me page. And if your template supports it, you can even customize a content page with a look and feel that’s different from your default template. But posts are a different animal. Suppose you want to display a specific post type on a page other than your home page. How do you do it?

This is a challenge I set out to solve for myself. I’m in the process of moving my WordPress.com blog to my own self-hosted site. I want the control and customize-ability a self-hosted solution offers. As a facilitator of the Lead Like Jesus servant leadership encounter workshop, I receive 3-weekly devotional messages from the Lead Like Jesus organization that I want to publically post on a page other than my home page. I want to display them on a dedicated devotional page accessible from the main menu. Easy? Yes, if you know how to do it!

Thanks to custom post types, this task is very do-able and quite easy if you have the right guidance. But finding the right guidance on the web has proven to be very difficult. While I found many pages about custom post types, I found very few that give clear directions on how to create and display them. It’s really as simple as 1-2-3. Here are the steps:

Register the custom post type in WordPress
Create single-<custom-type>.php
Create page-<custom-type>.php

Register the Custom Post Type in WordPress

Registering the custom post type in WordPress requires editing your theme’s functions.php file. To do this:

Select Appearance from the dashboard
Choose Editor from the Appearance menu
Select Theme Functions (functions.php) from the right-most column labeled Templates
Add the following code to the bottom of the functions.php file.

/** following code block added by vmf on 11/12/2010
*   registers custom post type 'leadlikejesus'
*   caution: if template gets updated by developer
*   this file may get overwritten and you will have to restore
*   this functionality. Make sure you save it someplace safe.
*/

// execute the create_post_type() function
add_action( 'init', 'create_post_type' );

function create_post_type() {

 // create an array for all of the display prompts
 $labels = array(
        'name' => __( 'Devotionals' ),
        'singular_name' => __( 'Devotional' ),
        'add_new' => __( 'Add New' ),
    'add_new_item' => __( 'Add New Devotional' ),
    'edit' => __( 'Edit' ),
    'edit_item' => __( 'Edit Devotional' ),
    'new_item' => __( 'New Devotional' ),
    'view' => __( 'View Devotional' ),
    'view_item' => __( 'View Devotional' ),
    'search_items' => __( 'Search Devotionals' ),
    'not_found' => __( 'No devotionals found' ),
    'not_found_in_trash' => __( 'No devotionals found in Trash' ),
    'parent_item_colon' => ''
 );

 // create an array for the arguments to pass to register_post_type()
 $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    '_builtin' => false, // It's a custom post type, not built in!
    'rewrite' => array('slug' => 'devotionals'),
    'capability_type' => 'post',
    'hierarchical' => false,
       'supports' => array( 'title', 'author', 'editor', 'comments', 'trackbacks', 'sticky', 'excerpt', 'custom-fields', 'thumbnail', 'page-attributes' )
 );

    // register the new custom post type
    register_post_type( 'leadlikejesus', $args);

    // flush the rewrite rules to prevent 404 error
    flush_rewrite_rules();
}

// end custom post type 'leadlikejesus'

/** following code block added by vmf on 11/12/2010

* registers custom post type 'leadlikejesus'

* caution: if template gets updated by developer

* this file may get overwritten and you will have to restore

* this functionality. Make sure you save it someplace safe.

// execute the create_post_type() function

add_action( 'init', 'create_post_type' );

function create_post_type() {

// create an array for all of the display prompts

$labels = array(

'name' => __( 'Devotionals' ),

'singular_name' => __( 'Devotional' ),

'add_new' => __( 'Add New' ),

'add_new_item' => __( 'Add New Devotional' ),

'edit' => __( 'Edit' ),

'edit_item' => __( 'Edit Devotional' ),

'new_item' => __( 'New Devotional' ),

'view' => __( 'View Devotional' ),

'view_item' => __( 'View Devotional' ),

'search_items' => __( 'Search Devotionals' ),

'not_found' => __( 'No devotionals found' ),

'not_found_in_trash' => __( 'No devotionals found in Trash' ),

'parent_item_colon' => ''

);

// create an array for the arguments to pass to register_post_type()

$args = array(

'labels' => $labels,

'public' => true,

'publicly_queryable' => true,

'show_ui' => true,

'_builtin' => false, // It's a custom post type, not built in!

'rewrite' => array('slug' => 'devotionals'),

'capability_type' => 'post',

'hierarchical' => false,

'supports' => array( 'title', 'author', 'editor', 'comments', 'trackbacks', 'sticky', 'excerpt', 'custom-fields', 'thumbnail', 'page-attributes' )

);

// register the new custom post type

register_post_type( 'leadlikejesus', $args);

// flush the rewrite rules to prevent 404 error

flush_rewrite_rules();

}

// end custom post type 'leadlikejesus'

Click the Update File button
Refresh your browser. You should now see a menu for the custom post type on the dashboard menu.

I’m not going to detail the parameters for the register_post_type() function. You can learn all you’ve ever wanted to know about the function here at codex.wordpress.org. And of course, unless you want to name your custom post type “leadlikejesus,” modify the code to your liking before updating functions.php.

Create single-<custom-type>.php

The single.php file displays your post when you click the view link on the post listing page or the View button on the post editing page.

To create this file, copy the single.php file you’ll find in your template’s main folder to single-.php. is the name of the custom post type you registered in WordPress in Step 1.

Create page-<custom-type>.php

The page-<custom-type>.php file is the actual template you will assign to the page you create to display your custom post types. Unlike the single-<custom-type>.php page we created in Step 2, this time you’ll have to create your own page template. In most cases, the template you are using doesn’t have a model from which we can copy a new file. Luckily, the great folks at WordPress.org have provided a great starting example in this article. My customization of the article’s code is illustrated:

<?php
/**
 * Template Name: Lead Like Jesus Devotionals
 *
 * Selectable from a dropdown menu on the edit page screen.
 */
?>

<?php get_header(); ?>

  <div id="container">
   <div id="content">
<?php
$type = 'leadlikejesus';
$args=array(
  'post_type' => $type,
  'post_status' => 'publish',
  'paged' => $paged,
  'posts_per_page' => 10,
  'caller_get_posts'=> 1
);
$temp = $wp_query;  // assign original query to temp variable for later use
$wp_query = null;
$wp_query = new WP_Query($args);
?>

<?php

 get_template_part( 'loop', 'index' );?>
   </div><!-- #content -->
  </div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php

/**

* Template Name: Lead Like Jesus Devotionals

* Selectable from a dropdown menu on the edit page screen.

<?php get_header(); ?>

<?php

$type = 'leadlikejesus';

$args=array(

'post_type' => $type,

'post_status' => 'publish',

'paged' => $paged,

'posts_per_page' => 10,

'caller_get_posts'=> 1

);

$temp = $wp_query; // assign original query to temp variable for later use

$wp_query = null;

$wp_query = new WP_Query($args);

<?php

get_template_part( 'loop', 'index' );?>

</div>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Copy this code into your editor and change the “Template Name:” line in the comment block at the top of the file.

/**
* Template Name: Lead Like Jesus Devotionals
*
* Selectable from a dropdown menu on the edit page screen.
*/

The Template Name appears in the Page Attributes Template dropdown when you create your new display page. You also need to search for the following line of code:

$type = 'leadlikejesus';

Change the ‘leadlikejesus’ to the name of the custom post type your want to use. This is the name that you registered in WordPress in Step 1 and the name you’ll use to replace the ‘’ placeholder in Steps 2 and 3.

After you change the Template Name in the comment block and the $type variable, save your file as page-<custom-type>.php in your template’s main folder. As with the file you created in Step 2, is the name of the custom post type you registered with WordPress in Step 1.

If you are satisfied with the look and feel of your template, there’s nothing more to do to this file. If you want to use a different look and feel from the default template, you’re on your own to add the code to this file.

Pulling It All Together

You’re almost done. WordPress has taken care of all the heavy lifting behind the scenes and leaves the creativity to you. All you have left to do now is create a standard page and assign the page-<custom-type> template we created in Step 3 to it. Save it and view the fruit of your labor.

There’s one word of caution with all of this. If the developer of your template releases an update, you will lose these changes if the functions.php file gets overwritten. Make certain you save the code you added to functions.php in a safe place so you can add it back in again in the future if you need to. An alternative is to create your own child template if your template supports it. But that’s another lesson all together.

Comments

Bruno
February 22, 2011 at 5:14 pm
Hello Victor, thanks for your tutorial,
I’m trying to make the page-.php and i copy your code to my php file, i change the $type to my custom register post name, al nice.
Now a create the page assign the template a just made and when i check my page in the browser the is empty?????
It seems that the code inside the loop doesn’t return anything.
any idea?
RS
February 10, 2011 at 11:10 am
Thanks for this straightforward explanation. My main question about custom post types has been how to query them effectively, and this answers the question simply. The organization of the article is top-notch
Thanks again.
Piet
November 12, 2010 at 10:35 pm
nice tutorial, but I think you should have started with the child theme and not mentioning it as a kind of ps in the last paragraph…
- Victor Font
  November 13, 2010 at 2:11 pm
  Child templates have their own issues that lead to different frustration’s on their own. for example, I have some published pages that I haven’t attached to any menu. When I create a child template with only a .cc file, the un-menued pages show up in the menu of the child template. When you go to edit the menu, the pages are clearly not assigned to it, yet they show up in the child. That’s why I didn’t start with the child template.

Call Us Toll Free:

1-844-VIC-FONT (842-3668)