WordPress 3.0 Custom Posts

Since the update of WordPress from version 2.9 to WordPress 3.0 one of the main noticeable improvements (to make it into more of a CMS system) is the ability to add a new custom post type into your WordPress system.

If you want to have an option to be able to make a “Testimonial” post type, this will require different inputs to what a “Quote” or normal blog entry will require. WordPress has a great documentation on everything that a custom post can contain.

Getting started

To get started with our custom posts we want to use register_post_type(). The register post type will allow us to use tons of different options to be able to set up our custom post type. For our Testimonials post type, we want to have:

1. Company name
2. City
3. Province
4. Description
5. Image
6. Title

To start off with we want to add the following to functions.php in your active theme:

add_action( 'init', 'testimonials_posts'); // tell WordPress to look for our function
function testimonials_posts() {
    $args = array(
            // Post information will go here
        );
    register_post_type( 'testimonials' , $args );
}

Labels

Labels let us differentiate the type of entry from normal posts. Instead of when you add a new item it saying “New post” we can make it say “New testimonial” . The labels really let us customize the post type and make it a lot easier for the end user to be able to know what they are doing.

The labels are added into an array inside the register_post_type() function. After adding labels to make our post more user friendly this is the code we have inside our args variable:

$args = array(
		'labels' => array(
			'name' => __( 'Testimonials' ), // option to show in menu
			'singular_name' => __( 'Testimonial' ),
			'add_new_item' => __( 'Add New Testimonial' ),
			'edit_item' => __( 'Edit Testimonial' ),
			'new_item' => __( 'New Testimonial' ),
			'view' => __( 'View Testimonial' ),
			'view_item' => __( 'View Testimonial' ),
			'search_items' => __( 'Search Testimonial' ),
			'not_found' => __( 'No Testimonials found' ),
			'not_found_in_trash' => __( 'No Testimonials found in Trash' ),
			'parent' => __( 'Parent Testimonial' ),
		), // end of label array
			'public' => true,
			'rewrite' => array('slug'=> 'company'),
			'capability_type' => 'post',
			'hierarchical' => true,
			'menu_icon' => 'http://example.com/images/testimonials_thumb.png',
			'supports' => array('title', 'editor', 'thumbnail')
);

Public

Public has been added to this post type to make is publicly visible and also allow it to be placed on the WordPress admin menu, show in search engines and be visible to users on the front.

Rewrite

Rewrite allows us to be able to change the url format, having it set up like show above will format these post types as http://brenelz.com/blog/company/. To fully set this up you will need to change the Permalink Structure to something such as %postname%.

Capability Type

This is for the post type to be use for checking read, edit, and delete capabilities.

Hierarchical

Setting this to true will allow you to be able to specify a Parent.

Menu icon

You can also change the menu icon of the post to make it more custom. This is simple to do and will make it even more clear to the user. I found that a picture of about 15px X 15px was best for this area.

Supports

Supports gives up access to allow some of the default areas such as the title, blog area and thumbnail. We want to have all of these in our custom post type so will add support for each of them.

Custom Fields

To add our custom fields we want to tell WordPress to load them in the admin panel. Then we need to tell wordpress how to save the custom inputs. To do this we need to add the following:

  	add_action("admin_init", "admin_init");
    function admin_init(){
        add_meta_box("testimonial_data", "Company Details", "meta_options", "testimonials", "side", "low");
    }

    function meta_options(){
		global $post;
		$custom_fields = get_post_custom($post->ID);
		$company_name = $custom_fields["company_name"][0];
		$city = $custom_fields["city"][0];
		$province = $custom_fields["province"][0];
?>
	<label for="company_name">Company Name:</label><input id="company_name" name="company_name" value="<?php echo $company_name; ?>" /><br />
	<label for="city">City:</label><input id="city" name="city" value="<?php echo $city; ?>" /><br />
	<label for="province">Province:</label><input id="province" name="province" value="<?php echo $province; ?>" />
<?php
	}

After setting this we now have our custom inputs in our “Company details” area when we go write a new testimonial.

Next we need to set up a way to save what was typed, the custom post fields are very similar to custom fields (which you can read more about here) and we need to set up an option to save them so we can pull them out in the post later. This is done with the following:

add_action('save_post', 'save_company_info');
function save_company_info(){
	global $post;
	update_post_meta($post->ID, "company_name", $_POST["company_name"]);
	update_post_meta($post->ID, "city", $_POST["city"]);
	update_post_meta($post->ID, "province", $_POST["province"]);
}

Here we get/make the global variable $post and update the custom field metadata with each fields input’s value.

This should now be all set up for editing/making a new custom post type. Here is all the final code needed.

add_action('init', 'testimonials_posts');

function testimonials_posts() {
    $args = array(
		'labels' => array(
			'name' => __( 'Testimonials' ), // option to show in menu
			'singular_name' => __( 'Testimonial' ),
			'add_new_item' => __( 'Add New Testimonial' ),
			'edit_item' => __( 'Edit Testimonial' ),
			'new_item' => __( 'New Testimonial' ),
			'view' => __( 'View Testimonial' ),
			'view_item' => __( 'View Testimonial' ),
			'search_items' => __( 'Search Testimonial' ),
			'not_found' => __( 'No Testimonials found' ),
			'not_found_in_trash' => __( 'No Testimonials found in Trash' ),
			'parent' => __( 'Parent Testimonial' ),
		), // end of label array
			'public' => true,
			'menu_icon' => 'http://example.com/images/testimonials_thumb.png',
			'rewrite' => array('slug'=> 'company'),
			'capability_type' => 'post',
        	'hierarchical' => true,
        	'supports' => array('title', 'editor', 'thumbnail')
	);
    register_post_type( 'testimonials' , $args );
}

  	add_action("admin_init", "admin_init");
    function admin_init(){
        add_meta_box("testimonial_data", "Company Details", "meta_options", "testimonials", "side", "low");
    }

    function meta_options(){
		global $post;
		$custom_fields = get_post_custom($post->ID);
		$company_name = $custom_fields["company_name"][0];
		$city = $custom_fields["city"][0];
		$province = $custom_fields["province"][0];
?>
	<label for="company_name">Company Name:</label><input id="company_name" name="company_name" value="<?php echo $company_name; ?>" /><br />
	<label for="city">City:</label><input id="city" name="city" value="<?php echo $city; ?>" /><br />
	<label for="province">Province:</label><input id="province" name="province" value="<?php echo $province; ?>" />
<?php
	}
  add_action('save_post', 'save_company_info');
function save_company_info(){
	global $post;
	update_post_meta($post->ID, "company_name", $_POST["company_name"]);
	update_post_meta($post->ID, "city", $_POST["city"]);
	update_post_meta($post->ID, "province", $_POST["province"]);
}

Displaying the custom post

To display our custom posts in their theme we need to set up a style for them. To do this, WordPress searches for a file named single-custom_post_type_name.php. So we will need to make a file named single-testimonials.php. I have copied the code from the Twenty Ten theme and modified it to work with our custom post inputs. This is what I had at the end.

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
	$custom_fields = get_post_custom($post->ID);
	$company_name = $custom_fields["company_name"][0];
	$city = $custom_fields["city"][0];
	$province = $custom_fields["province"][0];
get_header(); ?>
		<div id="container">
			<div id="content" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<div id="nav-above" class="navigation">
					<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous testimonial link', 'twentyten' ) . '</span> %title' ); ?></div>
					<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next testimonial link', 'twentyten' ) . '</span>' ); ?></div>
				</div><!-- #nav-above -->

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<h1 class="entry-title"><?php the_title(); ?></h1><br /><br />
					<b>Company Name:</b><?php echo $company_name; ?>  <br />
					<b>Company City:</b><?php echo $city; ?> <br />
					<b>Company Province:</b><?php echo $province; ?>
				    <div class="entry-content">
				        <?php the_post_thumbnail(); ?>
				        <br /><b>Details:</b><?php the_content(); ?>
				        <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
				    </div>
<?php endwhile; // end of the loop. ?>
			</div><!-- #content -->
		</div><!-- #container -->

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

Which produces a nice template for our theme.

Conclusion

I personally like the new custom posts and think that they can become very useful for building sites for people that won’t be able to know how to use the standard custom post fields, or know that “Posts” are what they need to click on. To get more help with the code and what to do WordPress also has a great codex on registering the post type and general information/help about the Custom Post types.

Be Sociable, Share!

• 

Related posts:

1. Using WordPress Custom Fields
2. Quick Tip: WordPress Random Posts

Written by Alex

My name is Alex Bor and I am currently a full time student. I have been building websites for about 4 years and love to build sites that will take advantage of new techniques (such as AJAX and CSS3) to make them both look nicer and be more user friendly. You can view my website or follow me on Twitter.