Customizing WordPress Part Three

This is the last in a set of three tutorials based on a talk I gave at the 2010 WordCamp in Minneapolis. In this tutorial I’m going to give some examples of how I’ve used custom post types, how to make them better and how to give my clients a better experience in administrating their site.

Part one where I talk about customizing the logo, and admin header and footer is here.

And part two where I talk about customizing the dashboard and creating your own custom widgets specifically for your client can be found here.

Now, others have covered these topics in detail and I’ve even talked about them before so if you’re familiar with the concepts of custom post types and custom taxonomies feel free to skim the next few paragraphs and head south to the examples. For those of you that just aren’t quite sure what all the big fuss is about, read on my friend.

A custom post type is a function that you can use to define, input, and organize different types of content into your site.

Why do I care about this?

So in the past if I had a client that came to me and wanted to build a real estate site where he could list all of properties for sale I would tell him that WordPress could handle it. And I would set it up so that there would be a properties category that would be checked off and in the theme file I would query to find only the posts marked as properties. Well that’s all fine and dandy but then the same client says that he also wants to have a blog where he can write about mortgage rates and home selling tips. And I say ok, no problem. We’ll just set up a category called blog.

Now here is where it starts to get tricky – because now I have to explain to the client that each type of content he wants to put on his site is called a post…

And then I have to deal with writing extra conditional code because when someone clicks on an archive link in the blog section I don’t want all the property listing posts to come up and what about when someone is searching the properties? I don’t want blog posts mixed in. So now I have a big headache and a lot of extra coding to do – not to mention trying to educate my client on the fine art of clicking the right category…

And at this point I’m not loving WordPress so much and if I’m not loving then my client probably isn’t loving it either. So it all comes back to giving our users the best experience possible and with WordPress the game changed when custom post types were introduced.

Because now I can separate my property listings from my blog posts. They have a separate place for data to be input. They have their own template pages. They can both be queried easily and the data is completely separate. I don’t have to worry about publishing an rss feed for my blog only to have all my property listings show up. It makes things easier.

At the end of the article I will list out a whole bunch of links that will point you to the best tutorials to actually code this stuff out.

So how have I been using them?

The first example is for a site called Green and Main. They have a lot of different types of content that need to be display and more importantly separated. Custom post types were a natural fit to do this.

Click for a full-size preview

If you click on the full size preview or squint really really hard at the small one you’ll be able to see that there are 4 different custom post types the site is utilizing. Its very easy for the client to log in and choose where the content will go.

The next example is for a church called Lakeside Fellowship. Adding custom post types to this site has been invaluable because there are several volunteers responsible for adding content into the different areas and it makes it nice for them to have their own specific area to manage content.

Click to see full size

I also used custom post types for law firm so that they could easily add client testimonials without interfering with their blog posts and lastly I utilized custom post types in my real estate theme Meadow Ridge which you can demo and purchase if you like.

Custom Post Types Even Better

So now you’ve gotten an idea of what possible with custom post types. Here are some ways you can make them even better.

The first is to make them smarter. Matt Wiebe of Soma Design created a custom class for registering custom post types which gives you several cool things:

• Custom URLs for a landing page for your post type, (eg http://yourdomain.com/movies/, http://yourdomain.com/movies/page/2/, http://yourdomain.com/movies/feed/ )
• Full pagination & feed support.
• Custom landing page templates: if you registered “movie” as your post type, you can use movie/index.php or movie.php in your theme directory (falls back to index.php if they don’t exist)
• Custom single page templates: WP already looks for single-movie.php (and falls back to single.php). This function allows you to use movie/single.php – great alongside movie/index.php for better theme organization.
• Adds classes to body_class() and post_class() for that post type.
• Auto-generates appropriate admin UI labels if you don’t supply any yourself (otherwise WP defaults to “post” or “page”).

The next thing you can do to make your custom post types even better is to make sure you include an icon with your custom post type. By default the icon will be the pushpin icon that is associated with the post item. If you want to give your users the best experience possible you’ll want to include these.

Its very easy to do – in fact it only takes one line of code when registering your custom post type. In the example below I’m registering a post type for different portfolio items I’m going to include on my site:

$properties_args_array = array(
		'labels' => array(
				'name' => __( 'Portfolio Items' ),
				'singular_name' => __( 'Portfolio Item' ),
				'add_new' => __( 'Add Portfolio Item' ),
				'add_new_item' => __( 'Add New Portfolio Item' ),
				'edit' => __( 'Edit' ),
				'edit_item' => __( 'Edit Portfolio Item' ),
				'new_item' => __( 'New Portfolio Item' ),
				'view' => __( 'View Portfolio Items' ),
				'view_item' => __( 'View Portfolio Item' ),
				'search_items' => __( 'Search Portfolio Items' ),
				'not_found' => __( 'No Portfolio Items found' ),
				'not_found_in_trash' => __( 'No Portfolio Items found in Trash' ),
			),
		'public' => true,
		'show_ui' => true,
		'query_var' => true,
		'hierarchical' => false,
		'menu_position' => 5,
		'menu_icon' => get_stylesheet_directory_uri() . '/images/icon-property.png',
		'supports' => array('title', 'thumbnail','editor', 'tags', 'author'),
	);

Notice the line for ‘menu_icon.’ All you need to do is upload your icon and put in the path to where you decided to keep it on the server. The icon should be 16×16 pixels and gray to fit the default WordPress color scheme.

This post is getting a little long so I’ll save the rest of the customizations for some additional posts. In the future I’ll be talking about how to add custom post columns, custom taxonomy columns, large custom post icons, custom taxonomies, and custom meta boxes.