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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/** 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
 |
 |
To create this file, copy the single.php file you’ll find in your template’s main folder to single-
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?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(); ?> |
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 ‘
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,
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.
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?
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.
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…
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.