WordPress began primarily as a blogging tool because of the “post” paradigm. You could easily create an online journal of running posts for your website. Over time the system matured with the addition of (static) Pages, and tags and categories for posts (for sorting).

With the ability to create custom fields for posts and pages (later), developers began to bastardize the system to create business websites. This was times both hard to deal with (if you creted websites) and frustrating at best. It was also the reason that non-WordPress devs would cry out “WordPress is NOT a CMS, use Drupal or Joomla…” At that time, they actually had a valid point.

Several years ago WordPress added “custom post types“, and taxonomies to the system. This was the point at which WordPress coders could finally tell the Drupalers and Joomla dev’s to shut up – this are the magic pieces that turned WordPress from a “blogging system” to a fully fledged content management system (CMS) for websites.

“Today we’re going to show you how to create and use a custom post type in WordPress with a taxonomy – both code (for intermediate and advanced WP users), and with plugins (for beginners or those that want to save time). Our example will be how to create a portfolio page with a custom post type in WordPress.”

What is a Custom Post Type?

Within WordPress, generally speaking most people know that posts are used for blog posts, and pages are used for pages (like about, contact, services, products, etc.). You can choose to have your posts displayed on the homepage, or a subpage (or not use them at all).

What you can’t easily do is group content together, other than creating pages, and then child pages. To make matters worse, you can’t assign tags and categories to pages (you can only use them on posts).

This led to one of two scenarios for most WP site builders. The first is to put items needing categorization all in posts (including blog posts), but separate them by category.

Such as making all blog posts in the “blog” category, and then services in the “services” category, with sub-categories (when needed) – this scenario is just a very messy affair.

The second way would be to create tons of WordPress pages and sub-pages (with no way to categorize or sort them other than the parent->child relationship of the pages themselves). Some devs used ingenious ways to use custom fields to fit their needs, both in this scenario, and in the first example with posts.

Custom posts types were created to solve this issue.

Everyone is familiar with this image:

The first thing you learn about WordPress is where to go to create, manage, and edit posts, pages, media, links, and comments. By default every WordPress website looks like this on the wp-admin dashboard.

But, once you create a custom post type you’ll see additional selections available in the left sidebar of wp-admin.

In the image below we see the normal WP options for posts, media, links, pages, and comments, but we also see 3 new ones (featured, Market, and Products). These are 3 new “custom post types” that were created within this website.

Now that they have been created, it’s much easier for the client and developer to find and edit content within the website. For this website, everyone knows that posts are only blog posts, pages are static pages (about, contact), featured is for (home page) featured content, Market are the services pages, and products are the products pages.

In this image you see the edit screen for a custom post type “Featured Home”. Looks just like a post or page edit screen – doesn’t it?

How Do I Create a New Custom Post Type?

You can easily create a new custom post type via number of methods. We’re going to show you how to do it both with and without code (for both beginners and advanced users).

Using PHP Code for Custom Post types and Taxonomies

It’s easy to create a new custom post type with some code like this:

add_action('init', 'featured_register');

function featured_register() {

$labels = array(
'name' => _x('Featured Home', 'post type general name'),
'singular_name' => _x('Featured Home', 'post type singular name'),
'add_new' => _x('Add New', 'featured item'),
'add_new_item' => __('Add New Featured Item'),
'edit_item' => __('Edit Featured Item'),
'new_item' => __('New Featured Item'),
'view_item' => __('View Featured Item'),
'search_items' => __('Search Featured'),
'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() . '/article16.png',
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','thumbnail')
);

register_post_type( 'featured' , $args );
}

That code would be something that you would add the the functions.php file of your WordPress theme. If you’re a coder, and you want more information on how this works, then check out the register_post_type page in the WP Codex here.

The next thing you would need to do would be to register a taxonomy. A taxonomy is an ordered list of things. Within normal (blog) posts tags and categories are ways to sort posts via taxonomy. By default a custom post type won’t have any taxonomy attributes (unless you define them). So if you’re a coder, you need to use the function register_taxonomy.

Here’s a code example of registering a taxonomy for the custom post type we just created:

register_taxonomy("Type", array("featured"), array("hierarchical" => true, "label" => "Type", "singular_label" => "Type", "rewrite" => true));

That example code creates a taxonomies for “Type”, that could be used to create types of featured content (like tags). In this example for the “Featured” custom post type, maybe Type is a taxonomy item where you add things like “food”, “drink”, “movies” for a website listing featured deals around town.

Taxonomies are helpful for categorizing content, and many times websites have content that would never fit in traditional post or pages. If you have a movie website, you might have a custom post type taxonomy with attributes like “studio”, “actor”, “director”, “rating”, etc. A recipe website might have “ingredients”, “prep time”, “difficulty”, “nationality”, etc.

The last thing you might want to do are add any custom fields you might need for your custom post type edit screen. Examples would be a meta box for clickable URL, an address, phone number, icon URL, expiration date, etc.

We’re not going to delve into the code for that here, but you might want to check out the add meta box function in the WP Codex, or this tutorial on manually creating custom post types.

Using a WordPress Plugin to Create Custom Post Types

The great thing about WordPress is that once somebody figures out how to do something cool with code, somebody else creates a plugin that allows people that don’t know code to do it.

One of the first plugins that came out for creating and managing custom post types was Custom Post Type UI. It’s simple, basic, and it works. I’ve used it a lot over time, but (as usual) I recently found something that works even better.

I’d like to introduce you to the Types plugin, which is brought to you by the same people that create and manage the near famous WPML plugin.

Custom post types could be used to build a site with recipes, reviews, classified ads – just about anything. But you could also use it to build a featured content area, a portfolio page, or even a slider area for your homepage. For our purposes today we’re going to build a portfolio page.

In the image below we’re starting on the main settings page of the Types plugin, and we’re going to create a new custom post type and taxonomy.

To add a new custom post type with Types the first thing we need to do is add in our plural and singular name, and then the slug (that will become the URL), and a brief description.

Next you choose the visibility. If the custom post type is visible, users will be able to add and edit items for it in the WordPress admin dashboard. If it’s hidden, you can add data with code, but users will not be able to add or edit content for that custom post type from the dashboard later.

The meta box after that allows you to select existing taxonomies to use with this custom post type. In this example categories and tags exists because their associated with posts. The Map categorys taxonomy is for a maps plugin we have installed in this test site. Most times you won’t want to use an already registered taxonomy for a custom post type – because they will share search results, and identifiers. If you have 100 tags for your posts, then those 100 tags will be available to your custom post types (and vice versa).

Next you can choose the labels for your custom post type. You can accept the defaults, or edit them to your liking.

Then choose display sections. This is where you choose the default meta boxes that will be available on the edit screens when you add a custom post. By default title and editor are checked (because you need them to properly add content). Beyond that you can choose to have commenting and trackbacks on or off, whether to be able to change the author, whether or not to have an excerpt box, whether or not to have a featured image, custom fields, page attributes, or post formats.

In the advanced section you can choose multiple options – keep in mind that generally speaking, these are for advanced users. You can choose whether or not to use permalinks with your new post type (highly recommended that you do). The option after that is cool because you can choose a custom URL format (if you need to). You can choose whether feeds are on or off for this post type, you can choose whether or not it has an archive (whether it has an index page or not), and whether or not (and where) to show in the admin dashboard menus.

In the last section of advanced settings you can choose whether or not to show a UI to manage this post type, whether or not it’s publicly queryable using post_type queries in code, whether to include in search or not, whether or not it’s hierarchical, whether or not you can export the posts, to show it in nav menus or not, whether or not it can be used in query_var, and the default permalink epmask.

After advanced options you have one more meta box – you can choose a post relationship (if you need to). Generally this is something you won’t need to do, but you could define a parent or child for your custom posts. We’ve expanded the Children option to show that you can only choose from current existing post types. The Types plugin has some great documentation, you can learn about post type relationships here.

When you’ve selected the options you need, click the “save custom post type” button and you’ve created your first custom post type.

In the sidebar, you should now see an entry for your new post type name, along with an “add new” option like this:

Now for our example site, we can add portfolio entries under that new post type sections.

This image is an example of the “add new portfolio” screen. You’ll see (click for full image) that we can add a title, content, an excerpt, a featured image, and we can change the order (if we need to).

Although we have 90% of what we need to add portfolio items and create a great portfolio page – what we’re missing is a taxonomy (a way to sort them). We chose not to use tags or categories, because we didn’t want them to be mixed with blog posts.

When you to the “Types -> Custom Types and Taxonomies” sub-menu you’ll see this page. You can see in the image below that we’ve created a post type “Portfolio”, the description, that it’s active, but that it has no taxonomy. So we’re going to create one by clicking the “Add Custom Taxonomy” button.

This is the “add new taxonomy” screen. You’ll notice that much of the choices are the same as adding a new custom post type itself. The first thing we have to do is givee our taxonomy a name and description.

Then we choose whether or not the taxonomy will be visible from the wp-admin dashboard (and it probably should be if you’re going to use it).

Next choose what post type to use the taxonomy for. We are creating this taxonomy “Type” to use for that Porfolio post type – so that’s what we’ll choose. Note here, although you wouldn’t do it very often, you can use the same taxonomy for different post types.

You can also edit the labels for the taxonomy, although much of the time you’ll probably just use the defaults.

Last you have some advanced taxonomy options, some of which are similar to custom post type advanced options, some are new. The first option is important, whether or not to make the taxonomy hierarchical, in the same way you would have say categories, and sub-categories (or keep them flat like tags). You can choose to rewrite them (for SEO value), whether or not to have hierarchical URL’s, to use show_ui, show in nav menus, or use query_var. You can also choose to use show_tagcloud (or not).

When you’re done just click the “save taxonomy” button and you’re done. Now we have one new custom post type, and one new Taxonomy (that we’ve tied to it):

When you go to the custom post section for “Portfolio” in the WP dashboard now, you’ll see a new sub-menu for “Type” there like this:

Visiting the manage “Type” screen, you’ll see that it’s just like adding and removing categories for posts. Since we made this taxonomy item hierarchal, we can now make both types, and sub-types.

How Do I Display Custom Post Types on the Website?

Alright, so we created a custom post type on the backend WP dashboard (Portfolio), and we gave it a Taxonomy to sort by (Type), and we can add new Portfolio items until the cows come home. We can even give them an excerpt, featured image, and description. What you don’t know is how the heck to get them to display within your WordPress theme.

By default WordPress can show (normal blog) posts on your homepage, or you can assign that to an inner page. It can show static “pages”, and you can create some type of menu using a combination of either. However, WordPress by default doesn’t know about any custom post types you’ve created – and there is no theme template out of the box for that type of thing (maybe there should be!).

We’re going to once again show you two options to make your new custom post types display on the front end of your WordPress website. The first with code (for intermediate and advanced), and the second with a plugin (for all levels, but especially beginner).

We’ll start with the coding way…

You Need a Custom Post Type homepage

In WordPress by default under “Settings -> Reading” on the dashboard, you can set where the default (blog) posts are shown. In the image below you see you can choose to show on the homepage your latest posts in normal fashion, or a static page.

If you choose static page, then you must choose which page to show for your homepage, and then which page the default (blog) posts are to be shown upon.

We showed that so you would be aware that WordPress offers options for where normal posts are shown, but no options for where to show custom posts that you’ve created.

In order to make that happen, we need to create a custom type “homepage” to show the Portfolio posts.

To do that we need a Custom theme page template that we can use.

We’re using the 2011 theme in our example site, we go to /wp-content/themes/twentyeleven and find “page.php” and download a copy and open it in a text editor, and we add this to the top:

Then we save that file as “page-portfolio.php” and upload that saved file to the theme directory of our webserver.

Now we create a new “Page” in WordPress called “Portfolio”, and on the edit scree, as in the image below in the right under “Page Attributes” we assign the “Portfolio” template to be used for this page and “Publish”.

Now we have a published page called “Portfolio” that uses the “Portfolio” page template. At this point all it’s going to do is show whatever text or content we add from the edit screen of this page. It won’t show any actual portfolio items (because we haven’t added the code to do that yet).

Before we get started here’s the code we have to start with for page-portfolio.php:

It’s pretty basic so far, all it does is get any content we added to the Portfolio page itself like this:

We’re going to add some PHP code to page-portfolio.php to make our portfolio posts show on that page. You might want to review the official WordPress page on Post Types, and the Codex Example Using Custom Post Types. Another good reference is the official Codex page for WP_Query.

So, we’re going to add this code to our page-portfolio.php file just before the beginning of the loop (that’s the if have posts, while have posts line):

'portfolio')); ?>

Now save and upload to your server and you’ll see the portfolio entries appear on your portfolio homepage like this:

We don’t show the whole page here, but we have 3 portfolio items, and the title and content for each is displayed in full on this page (the default layout). If this is all you want to do in your layout, your homefree with adding that one line of code to your page template (like we did).

However, for us – we’d like to show only excerpts, we need to add a thumbnail for each item, and we want to show the content of the portfolio page itself, and then the individual portfolio items.

We we’re going to remove that line of code from page-portfolio.php, and then after the first loop (to get portfolio page content), we’re going to add a second wp_query loop to get the list of portfolio posts themselves and display them like this:

'menu_order'
,'order' => 'ASC'
,'post_type' => 'portfolio' // custom post type name
,'post_status' => 'publish'
) );
if ( $query_default->have_posts() ) :

while ( $query_default->have_posts() ) : $query_default->the_post();

get_template_part( 'content', 'single' );

endwhile;

else : // else; no posts
_e( 'Nothing published so far.', TEXTDOMAIN_CONSTANT );
endif; // endif; have_posts();

wp_reset_query();
?>

This will get us the Page title and page content for portfolio, AND the titles and contents of all the portfolio items we’ve published so far (which is 3). So – we’re closer to where we want to be, but we’re still showing the full posts.

You see in the code above a convention of the 2011 theme (that your theme might and should follow), the use of template parts. It says for get_template_part to use content, single. If you look in the twentyeleven theme directory you’ll find a file actualy called content-single.php that controls this part of the page.

We’re going to save it as “content-portfolio.php” and save it, and re-upload back to the server in the theme directory.

In that file around line 22 we see this code: