Tutorial: Creating A WordPress Custom Post Type

In this WordPress tutorial I will show you how to easily add a new Custom Post Type to you site, this new WordPress post type will be called ‘Portfolio’ and as the name suggests will allow you to add portfolio items to your site which you will then be able to query and show to the end user.

David Martin on October 18, 2012

Get our posts emailed to you with our monthly newsletter, subscribe here.

WordPress has the ability to be way more then just a standard blog, as of WordPress 3.0+ you know have the ability to add custom post types to your installation and to use them to display pretty much any type of content you wish.

WordPress custom post types as standard are Posts, Pages, Attachments, Revisions and Nav Menus – you can add to this with whatever you may need, for example: Portfolio, Staff, Conference the list is endless.

In this WordPress tutorial I will show you how to easily add a new Custom Post Type to you site, this new WordPress post type will be called ‘Portfolio’ and as the name suggests will allow you to add portfolio items to your site which you will then be able to query and show to the end user.

Step 1: Add A New Custom Post Type

First before changing anything in your theme do a backup and read up on creating a WordPress child theme – warning over!

To keep my file structure in WordPress clean, separated and logical I will create a new WordPress child theme, for this demo we will use the default Twenty Eleven theme, so for this tutorial please active the theme on your dev site.

In my WordPress theme folder ‘wp-content/themes’ create a new folder and name it ‘custom-post-type-childtheme’, inside this create a folder called ‘functions’ and then create a new PHP file called mytheme-post-types.php within this file we will use the register_post_type WordPress function to create our new custom post type. In the new file located ‘functions/mytheme-post-types.php’ add the below code.

	/* Create a custom post type called Portfolio */    	function dw_create_post_type_portfolio()   	{  		$labels = array(  			'name' => __( 'Portfolios','your_text_domain'),  			'singular_name' => __( 'Portfolio','your_text_domain' ),  			'add_new' => __('Create New','your_text_domain'),  			'add_new_item' => __('Create A New Portfolio','your_text_domain'),  			'edit_item' => __('Edit Portfolio','your_text_domain'),  			'new_item' => __('Create Portfolio','your_text_domain'),  			'view_item' => __('View Portfolio','your_text_domain'),  			'search_items' => __('Search Portfolio','your_text_domain'),  			'not_found' =>  __('Sorry, no portfolios found.','your_text_domain'),  			'not_found_in_trash' => __('No portfolio found in trash.','your_text_domain'),   			'parent_item_colon' => ''  		  );    		  $args = array(  			'labels' => $labels,  			'public' => true,  			'exclude_from_search' => false,  			'publicly_queryable' => true,  			'show_ui' => true,   			'query_var' => true,  			'capability_type' => 'post',  			'hierarchical' => false,  			'menu_position' => 5,  			'menu_icon' => get_bloginfo('template_directory') . '/img/portfolio_icon.png',  			// Uncomment the following line to change the slug;   			// You must also save your permalink structure to prevent 404 errors  			//'rewrite' => array( 'slug' => 'portfolio' ),   			'supports' => array('title','editor','thumbnail','custom-fields','page-attributes','excerpt')  		  );     		  register_post_type(__( 'portfolio' ),$args);  	}    	add_action( 'init', 'dw_create_post_type_portfolio' );

In the above code we create a ‘Portfolio’ post type, we also pass alot of information into the $label array – this information is displayed later on the admin front-end. Some important information to take note of is what information we pass into the $args array, some key information is ‘publicly_queryable’, ‘menu_position’ and ‘supports’.

Publicly_queryable allows queries to happen n the front end of your site, in other words – show to the world, Menu_position allows us to control where in the left sidebar menu our new ‘Portfolio’ menu link will appear and Supports allows us to determine what post type support we need, for example title field, editor box or post formats.

Step 2: Calling Your New Custom Post Type

In the above code we set our new post type ‘Portfolio’ up and configured its parameters, we did this by creating a new file for the above code, this file we called ‘mytheme-post-types.php’ and we placed it within the child theme folder ‘functions’ folder.

Next we need to call this file from within the child themes functions.php file, in your child theme folder ‘custom-post-type-childtheme’ create a new file called ‘functions.php’ and add this at the bottom:

	// Add the Portfolio Custom Post Type  	include("functions/mytheme-post-types.php");

The above code is simply including our custom post type file into the theme

Step 3: Get Custom Post Type Posts

Once we have added a few new posts to the ‘Portfolio’ post type we can create a new WordPress page template to pull our ‘Portfolio’ posts in. Create a new file in your child theme folder called ‘template-portfolio.php’.

This will create a new page template in your theme that you can select to use when you create a new page, in the right sidebar look in the ‘Page Attributes’ box and select the new page template to use. In your new file ‘template-portfolio.php’ add this code:

        		
'portfolio', 'orderby' => 'menu_order', 'order' => 'ASC', 'posts_per_page' => -1 ); $query = new WP_Query( $args ); while ( $query->have_posts() ) : $query->the_post(); ?>
id="post-">

In the code above, we created a new ‘Page’ template that will pull all the posts from our new custom post type ‘Portfolio’. We alter the WordPress loop query slightly by sending ‘post_type’ => ‘portfolio’ into the array $args which is sent to the post loop query. This simply tells the WordPress loop to grab our custom post type ‘Portfolio’ posts only.

In Review

In Step 1, we created a new file within our functions folder to set up the new custom post type ‘Portflio’. In Step 2, we added a line of code to the theme ‘functions.php’ file to call the new file created in Step 1. In Step 3 we create a new page template that grabs all our new ‘Portfolio’ posts from the new post type and lists them.

Installation

As you hopefully noticed the files we have walked through have been created within a WordPress child theme and for the purposes of the demo I have configured the child theme to work with the Twenty Eleven theme.

To install this child theme simply: Download and unzip the files, upload the files to your WordPress themes folder ‘wp-content/themes’ Open style.css and change line 7 to your theme name – So this: Template: twentyeleven become this: Template: yourthemename Go to Appearance -> Themes and active the new WordPress child theme called ‘Portfolio Custom Post Type’.

If all done correctly, you will now see a new ‘Portfolio’ post type in your WordPress dashboard:

Tutorial: Creating A WordPress Custom Post Type

Creating and Displaying Portfolio Items

Creating Portfolio items is just like adding new posts, in the WordPress dashboard go to: Portfolios – Create New.

To add a page that pulls the new portfolio items, create a new page: Page -> Add New, select the ‘Page Attributes’ box and select the new page template ‘Portfolio Post Type’ we created from the drop down lost.

Tutorial: Creating A WordPress Custom Post Type

Download

You can download my child theme here, you will need to amend the child theme ‘style.css’ file as stated above and amend page template code to match your themes styling.

References

http://codex.wordpress.org/Post_Types

http://codex.wordpress.org/Child_Themes

Posted by David Martin

David Martin is a WordPress developer & entrepreneur from the UK. He owns DesignWoop, CardDsgn and WhoDesignToday. Catch up with David on Twitter.

2 Comments

  1. When you make a custom widget, specify in the widget loop what post type to grab: ‘post_type’=> ‘portfolio’

  2. hi there, I have a question. If I can make it, how to show the widget of this custom post in sidebar of the blog?

Comments are closed.