WordPress 3.0 Custom Post Types
WordPress 3.0 is a revolutionary release to the world’s #1 website content management system. There are several new functionality additions to the WordPress 3.0 release, but custom post types is arguably one of the most important.
Custom post types empowers WordPress designers with a fantastic new toolset for creating custom WordPress websites. In the following example, I’m going to make a very simple custom comment form to allow visitors to submit comments to a predefined post, creating a web page that can be used for submitting testimonials, etc.
This example assumes that you are familiar with editing WordPress template files, such as functions.php, single.php, ect.
Step 1.
Open your functions.php and add this code to the bottom. (Don’t modify any of the existing code for functions.php)
The name of this post type is ‘Submissions’, and the file reflects that value where necessary.
/** * CUSTOM POST TYPE */
add_action('init', 'submissions_register');
function submissions_register() {
$labels = array(
'name' => _x('Submissions', 'post type general name'),
'singular_name' => _x('Submissions Item', 'post type singular name'),
'add_new' => _x('Add New', 'submissions item'),
'add_new_item' => __('Add New Submissions Item'),
'edit_item' => __('Edit Submissions Item'),
'new_item' => __('New Submissions Item'),
'view_item' => __('View Submissions Item'),
'search_items' => __('Search Submissions'),
'not_found' => __('Nothing found'),
'not_found_in_trash' => __('Nothing found in Trash'),
'parent_item_colon' => ''
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'menu_icon' => get_stylesheet_directory_uri() . '',
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','comments')
);
register_post_type( 'submissions' , $args ); }
Open the WordPress admin and you will see a new menu named Submissions:
I want to give our new menu an icon like the other menus. The submission will be testimonials, reviews, etc., from visitors, so I will use this Web 2.0 styled people icon.
Find menu_icon in the args_array and add the image file url:
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'menu_icon' => get_stylesheet_directory_uri() . '/submissions.png',
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','comments')
);
Now we have a stylish icon for our menu.
Click on the Submissions menu, and you see this:
There is nothing there, because no posts have been added for Submissions. Click on the “Add New” button to add a post. The standard Wordpres post editor opens.
Add a title, some content, then publish the new post.
Preview the new post:
If previewing the post results in a 404 or not found, add the following to the bottom of the code in the functions.php:
register_post_type( 'submissions' , $args ); flush_rewrite_rules();
One thing that is missing from our post editor is a menu to enable comments. If this is going to be a testimonials page, comments must be enabled to allow visitor’s to post their testimonials.
Under the args array, add comments to the ‘supports’ argument.
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'menu_icon' => get_stylesheet_directory_uri() . '/submissions.png',
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','comments')
);
Upload the functions.php file again and refresh the post editor. The Discussion menu is now visible, allowing comments to be enabled.
Previewing the page again will display the comment form:
With custom posts we can greatly expand upon the feature set, but this particular example is very simple, so we can move onto editing the post template.
We will be using custom queries to display the comments (testimonials) in a custom page elswhere. We are going to use this post template to display the post and reply form only. To do that we will create a single-submissions.php template, cloned from the single.php template.
First, create 3 more posts so you can see the pagination navigation. Then create a comment. The page will now look like the image below. The areas highlighted in red will be removed from the single-submissions.php template, to display only the post title, content, and reply form.
Open single.php and save a copy as single-submissions.php.
The code in the template is commented well, making it easy to find the objects you want to remove. For example to remove the to pagination links, find and delete:
<div id="nav-above"> <div><?php previous_post_link( '%link', '<span>' . _x( '←', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div> <div><?php next_post_link( '%link', '%title <span>' . _x( '→', 'Next post link', 'twentyten' ) . '</span>' ); ?></div> </div><!-- #nav-above -->
Delete one object then refresh the page to view the results. Delete the next object and refresh the page again to check the results. This may seem a bit monotonous, but if an error occurs, you know that the last edit caused it. If you perform all the deletions in a single edit, and an error occurs, you will have to backtrack to find the error.
Here is the code after we have edited the template:
<?php
/**
* The Template for displaying all single Submissions post types.
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1><?php the_title(); ?></h1>
<div>
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
And here is the page preview result:
The “Comment” reference is still visible, and this is going to be a testimonial submission form, not a comment form. We will replace ‘comments_template’ with ‘comment_form’, then change display of the title, comment field label, HTML tags and submit button in the comment_form array.
In single-submission.php, find the following code:
<?php comments_template( '', true ); ?>
replace it with this:
<?php comment_form(array('title_reply'=>'Submit a Testimonial', 'label_submit'=> 'Submit Testimonial', 'comment_field'=> '<p><label for="comment">' . _x( 'Testimonial', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>', 'comment_notes_after' => '')); ?>
Previewing the page shows just what we wanted:
The “Website” form field is not necessary, so we need to remove that. Add the following code to the functions.php file:
add_filter( 'comment_form_default_fields', 'remove_comment_url_field' );
function remove_comment_url_field( $fields ) {
unset( $fields['url'] );
return $fields;
}
Preview the file again and the website form field is gone. I’ve changed the post title and the post content to reflect the ‘testimonial’ aspect of the post.
The form post is now complete and satisfies the need for a dedicated testimonial submission application. In my next tutorial I will demonstrate how to query the testimonial submissions to display on a static PHP page.
