WordPress has had the ability to create custom post types since version 3.0+, but it’s widely perceived as something so technical only a programmer or coder would want to try it. You can easily create your own custom posts types with a plugin (and no coding) in just minutes using this tutorial. You will (however) have to know how to edit your own theme files in order to make content created using these new custom posts types show up on your website…but we’ll show you how!
What are Custom Post Types?
Custom Post Types in WordPress are just another way to sort content using posts (and a great way to build a taxonomy). In our last post we talked about poor permalinks causing site performance issues if you have too many static pages in your WP site. More and more businesses are using WordPress for informational websites, which may or may not use the “blogging” capability that WordPress offers. Also, proponents of other open source CMS system (like Drupal, Joomla, etc) will say that WordPress is only good for blogging because it lacks taxonomy capabilities for sorting content.
Before WordPress 3.0, you had “posts” or “pages” in WordPress. Posts were blog posts, and pages were static pages (like your about or contact pages). Pages can have a heirarchy, where you can have a parent page and assign children. Posts cannot. But posts can have both tags and categories assigned – but pages cannot.
Custom Post Types are a completely new way to sort content. It can be heirarchal, it can have custom attributes, you can use tags and categories (or not), and you can choose whether it supports a title, excerpts, trackbacks, custom fields, comments, revisions, thumbnails, authors, page attributes, or even whether the default “editor” is used (or not).
In other words a custom post type can be anything from an image, to a file, media like audio / video, or custom content that doesn’t fit the normal mold, like a movie review, recipe, business listing, products, services, business cards, ads, classifieds, reviews – you name it!
Before custom posts types people used to ask “how can I do XYZ in WordPress”, and we’d have to find a way to do it (within the constraints of a page or a post). Now, we have nearly unlimited ways for building custom websites from scratch using native WordPress functionality.
How do I Create a Custom Post Type?
In your WordPress dashboard’s left had sidebar you normally see something like this in default WP:
You have your normal posts, media, links, pages, comments, etc.
Install the Custom Post Type UI plugin by Brad Williams and Webdev Studios. That’s what we’re going to use for this tutorial, but you could also use the CMS Press plugin as a UI to create custom post types (if you want an alternative).
Once you install and activate the plugin, you’ll have this new menu in your left sidebar of your WP dashboard admin:
The first link is some basic informational links and a (slightly outdated) video. Add new if for creating new items, and of course the manage links are for managing existing items.
Some people that we’ve suggested this plugin to have said “I can’t figure out how to create a custom post type”, and we’re figuring they didn’t watch the video? It’s pretty easy once you understand the basics.
Custom Post Types: this is the name of the kind of content you’re sorting, like blog, recipes, movies, ads, reviews, products, services, etc.
Taxonomies: these are the attributes that describe the custom post type name. Like if the custom post type were recipes, the taxonomies for it might be prep time, ingredients, skill level, etc.
So when you go to the “Add New” screen of Custom Post Type UI on the left side is a form for creating custom post types, and on the right is a form for creating custom taxonomies.
Create the new custom post type first:
You’re only required to fill out the first box with the name of your post type. There advanced options – but you don’t have to fill any of them out (unless you need to). We wanted to sort our blog posts for a new site in a custom post type – so we created one called “blog”.
Then (if we need one) we would create custom taxonomies for the post type:
Pay attention to the image above, and the last section where it says “attach to post type”. You can use this plugin to create custom taxonomy items, and then attached them to (standard WordPress) posts or pages (without creating a post type).
For example, if you created a taxonomy called “sponsor_name” and another called “sponsor_URL”, and assigned them both to “posts”, then you could add names and URL’s as taxonomy items in your posts, and then code your theme to say “this post sponsored by: Company ABC” (and the business name would be linked). When you add taxonomy items and attach it to something (like a post) you get standard editing boxes in the right sidebar of the editing screen when you add or edit items (where the tag and category boxes normally are). There are a lot of advanced options you could use (if you wanted to), especially for labels.
For our example, setting up post types for “blog” we decided we didn’t need a custom taxonomy, we just wanted to use standard tags and categories, and we’ll use custom taxonomy items later on for post types like “products” and “services”.
To do that we went to the “Manage Custom Post Types” screen, and then clicked edit:
Then we went to the “advanced options” by clicking that link:
You can see in the image above you have a lot of settings, but in the last section you can choose to use native WordPress “Built-in Taxonomies” for any post type (categories and post tags).
I Created a Custom Post Type – Now What?
Well, it’s time to create some content! When you create a custom post type – you’ll see it appear as a new top level menu item in the left sidebar of your dashboard admin like this:
So, just like pages, posts, links, media, and comments, custom post types have their own menu for sorting and adding new items. The first sub-link be default (blog in this example) is the list of items for that post type, and “add” is to create new ones. Beneath that your taxonomy items will be listed, and for this example since we chose built-in taxonomy items (categories and post tags) they are listed here.
Something to note is that if you use the built-in taxonomy items, any tags or categories you create are shared with normal “posts”. So the advantage of using custom taxonomy items is that those attributes will ONLY be used for that post type (unlike built-in WP ones).
If we click on “Add blog” then we get the normal edit screen like this:
Looks just like we’re adding a post – doesn’t it? You may be scratching your head asking – “if all you were going to do was sort blog posts AND you were going to use tags and categories anyway, why didn’t you just use normal posts?” Good question! The reason is, now that we’ve created a custom post type for “blog” posts, in the future if we can add any custom taxomies to it that we want (if we choose to at a later date). If we just start blogging away in “posts”, we’re completely limited to what standard WP posts can do.
How Do I get a Custom Post Type to Display in My Theme?
Ok, it was pretty easy to create a custom post type, and it’s pretty easy to create custom taxonomy items – but don’t think that when you create items using these new post types that they’re going to just appear on your home page (or anywhere else!).
A custom post type is just that – it’s CUSTOM. That means your WordPress theme (out of the box) is built to display normal wordpress pages and posts. If you want to show a custom post type – you have to add the (theme) code to support it.
From Justin Tadlock’s Showing Custom Post Types On Your Home Page you can get the code that allows you to “add” custom post types to your homepage loop. In other words, if your WordPress homepage has a list of posts, and created post types for “books”, “movies”, and “music” – with that code you could have your homepage show your posts + those posts types as well (mixed in a timeline). You can do the same for your RSS feed with some additional code.
That’s great if all you want to do is mix your new post types in on your homepage. Odds are, most of you might want to show your new post types on an inner page of your website though.
In that case, what you need to do is create a new static “page template” for your theme.
Hey – WAIT, don’t close this windows JUST YET – it’s NOT as bad as you think!
Here’s what you do…
In your WordPress dashboard go to “appearance->editor”, and when the page reloads, find your Page Template or “page.php” on the right and click on it. Once it loads up select all the text and copy it.
On your computer open a text editor (like Notepad) and paste all the code you just copied.
Now in the very top you want to add these 3 lines of code before everything else to give it a template name like this:
That’s what tells WordPress that this is a page template. Replace the name “PostTypeBlog” in those 3 lines with the name of your new post type.
This is where it gets a little bit tricky because different WordPress themes build “the_loop” differently. Your basically looking for the section of code in your page.php that looks like this (and every theme is a little different):
The, you’re going to replace that normal standard WP post loop with one for your new custom post type like this:
have_posts()) : $recent->the_post();?>
the WP_Query function of WordPress is VERY customizable, and you can modify the code in that string (if you want) to alter the number of items displayed, their order, and all kinds of other sorting options (like by author or taxonomy item).
Basically “as-is” that code is just a WP Query to show only “blog” post types. Of course replace if your post type were ‘movies’ then you’d edit that code to be post_type=movies, etc. Once you get the code the way you want it, save that in your text editor as something like “blog-post-type.php” and in your FTP program upload it to your theme folder in your website.
Once you upload your new page template for the post type to your WordPress theme directory, all you have to do is create a new static page – in our case we just created one called “blog”. Then before you publish it, in the right hand side under the publish box, you’ll see the page attributes:
If you did everything right, the name of your new template should be listed in the “Template” dropdown (like our BlogPostType), just select it and “publish” the page.
Then when you view that page on the front end of your website, you should now be able to see the new custom posts type items listed (just like you would ordinary posts):
Can I Customize the Display of Custom Post Page Even More?
What we didn’t show you were the myriad of options you could use for customizing the display of your new post types. In our example we just copied your standard WordPress static page template, and you can see in the last image that we’re just showing a title and then content, and an edit link.
What we’re not showing are tags, categories, date and time, author, or any meta info at all (the things you’d see in a normal list of posts). Because this is a page template, we’re just showing a list of custom post type content – you can’t even click on the titles for a single one at a time view (like normal posts) because we didn’t link them. So the example we gave would be best suited for something like a events page maybe, a portfolio page, or something where it lists things – but items don’t need their own single pages.
So we better give you a little more info (and code), because we think a LOT of you will want to go even further with this example…
Our example is a new page called “blog”, and we want it to show a list of “blog” posts, a little meta info, and then an excerpt of the content. Readers will have to click the linked title to read the whole blog post.
So this is what we did…
In our default static template (that we created the custom post template theme file from), inside “the loop”, the titles are created like this:
We changed the code to make it a linked title like this:
By default our page didn’t have any meta info, so we just copied that from our single.php of our theme like this (after the titles):
POSTED:
Maybe your theme has a div already styled for meta in your single.php, and you want to add meta info for links and categories like this:
Also, our example actually uses built-in taxonomy items in WP (tags and categories), and you might want to know how exactly to use your custom taxonomies as meta info under post titles, or after post content.
Let’s say for this example your custom post type is “Movies”. Then between the post title and the content, you might want to list your meta info like this:
ID, 'genre', 'Genre: ', ', ', ''); ?>
ID, 'actors', 'Actors: ', ', ', ''); ?>
ID, 'director', 'Director: ', ', ', ''); ?>
That code prints a list of each custom Taxonomy in an ordered, linked, comma separated list. The first name (‘genre’ for example) is the actual custom taxonomy name. the second instance (‘Genre: ‘) is the actual text title that will precede the linked list of items on the page as a label. You could chose to show some, all, or no custom taxonomy items as meta info on your new page with custom posts.
In our example we just went with a linked title, date based permalink, author, content, and edit link:
One thing we didn’t show you was, if you just change “the_content” to “the_excerpt” a little farther down in your code – your new custom post type page template will only show excerpts of those new post types (and readers will have to click to get the full version).
If your new list of custom posts is linked like ours, you can click on that link to get visit the individual custom post pages. You’ll notice on the URL bar that the address will be in the format of /post-slug/postname, so for our example it was /blog/test-blog-post.
The only thing is, that individual custom post page might not exactly be what you were thinking of (just yet).
WAIT – What About A Custom Single Post Page?
Alright – we’ve covered a LOT of ground here, and at this point you probably smacked your head and had a “V8” moment just like we did. We’ve created custom posts types, custom taxonomy items (if you need them), and we even created a custom theme page to display new post types, and then showed you how to link them to individual post type pages.
What we DIDN’T tell you was how to ALSO customize that single post page. Remember, by default WordPress shows all post pages (even custom post type ones) using the “single.php” theme template. That means that your new custom posts will have normal metadata fields like tags and categories (that may or may not be useless), and any custom taxonomy info won’t be shown.
How to fix this? Copy your single.php code (like you did with page.php) into a text editor. You can’t use the template name as we did for the static page template, because posts don’t use custom templates like pages do. We have to build a condition into your single.php that takes into account your new custom post type – and does specific things only when those pages are displayed.
We’re going to draw knowledge from the official WordPress Codex Conditional Tag page for this and the get_post_type function like this in the code:
For the sake of brevity (in this VERY long post) I'm not going to show the custom post type and normal single post code. If you've gotten this far in this tutorial, you'll know exactly how to tweak and set that up for a custom single post pages.
Custom Post Type Resources
We hope this post has helped you in some small way - and if (like us) you benefit from multiple examples, please by all means look at some of these additional resources for WordPress custom post types:
Essential Guide to WordPress 3.0 Custom Taxonomies: good taxonomy specific info
Create your first WordPress Custom Post Type: good resource for how to do it all by hand without a plugin
Create a Professional Portfolio Using WordPress custom post types: Great example for a portfolio
JTPratt Media is a web development company that creates custom themes and custom WordPress plugins.
