By Neil on January 20, 2014
Custom post types using the Types plugin
Custom post types are a great way to categorise your website content and they also make it quick and easy to add different types of content to your site and have it formatted and displayed in a consistent manner. This walk through tutorial shows you how I created the custom post type Turbo Trainers that I use on the website TurboBikeTrainer.com to add and then display individual turbo trainer models. I use the WordPress plugin Types to create this custom post type, and then another plugin called Views to style and format it. Read more about Types and why I use it to create my custom post types here.
The 15 minute video below takes you through the install of the Types and Views plugins and then the creation of a custom post type for Turbo Trainers along with corresponding custom fields. There is also a quick section on linking custom post types to custom post templates.
The first step is to download and then install the Types plugin. I also recommend installing the Views plugin too because this is used later to create custom post templates that style your custom post types. These WordPress plugins are developed by onTheGoSystems and you can get them here. You install and then activate the plugins the normal way via the Plugins screen in your WordPress dashboard.
I got an error message during the install of the Types plugin stating “The uploaded file exceeds the upload_max_filesize directive in php.ini.”
If you get this error I solved my problem by opening up a blank text document (I recommend Notepad++ http://notepad-plus-plus.org/) and inputting the following text:
php_value upload_max_filesize 50M
php_value post_max_size 50M
php_value max_execution_time 500
php_value max_input_time 500
Save this text document with a file name of .htaccess and then put this folder into the root drive of your WordPress install. You will need FTP access to your WordPress files to do this.
With Types and Views activated you will see two new tabs in your WordPress dashboard. For now we will ignore the Views tab and focus on the Types tab.
Hover over the Types tab and from the drop-down menu click on Custom Types and Taxonomies. In the new Custom Post Types and Taxonomies window click on Add Custom Post Type, as shown in Figure 1.
Figure 1 Adding a new custom post type.
The Add New Custom Post Type window will now show and you need to start by defining a plural name, singular name, and slug. Here I called mine Turbo Trainers, Turbo Trainer, and turbotrainers respectively. All other fields are left as default apart from in the Display Sections area. This is what shows in the dashboard when you go to create a new Turbo Trainer post, so in this case we want the Title to show as an input field so we leave this ticked, however we do not want the standard Editor area to show, so un-tick the Editor check box. Now scroll to the bottom of this page and click on Save Custom Post Type. You will now have a new Turbo Trainer tab in your dashboard on the left-hand side.
Custom post type created…CHECK! Now that was pretty straight forward.
The next step is to create some custom fields that we will use within our custom post type. These fields relate to different content areas that we want to fill in for our new turbo trainers. In total there are three image fields, six specifications fields, a description field, and a field for prices & buy now options.
Adding custom fields is easy with the Types plugin. In the dashboard hover over the Types tab and this time select Custom Fields from the drop-down menu. Then when the Custom Fields window appears click on Add a custom fields group.
An Add New Group window will open and give your group a title, I called this one Turbo Trainer Parameters. Under the Where to display the group section click on Edit next to the Post Types: Displayed on all content types text. Choose Turbo Trainers (or whatever you called your custom post type) and click OK. We are now ready to start adding our custom fields.
On the right-hand side there are a whole host of available fields. We’ll start by clicking on the Numeric field (as shown in Figure 2). This opens a new Numeric field in the Fields area of the window, which you need to assign a name and slug too. Make sure the Numeric check box is ticked. The name of this field is RRP and the slug is rrp. Click Save to save your current progress. Next add a Select field and call it Brands with a slug of brands. In this field we want several possible selection options, so go ahead and click on the Add option button in this new Select field until you have 8 boxes. Under Display text fill in the areas with Tacx, Elite, CycleOps, Kurt Kinetic, Minoura, LeMond, and BKOOL. The numbers in the corresponding Custom field content areas should be 1,2,3,4,5,6,7,8.
Figure 2 Adding a Numeric field to a new custom fields group.
Next add a Single line field and call it Model name with a slug of model-name. Follow this by a Radio field called Braking mechanism with a slug of braking-mechanism. Like the Select field there are a few options here so click Add option until you have 6 options. Fill these 6 boxes with Display text of Wind, Fluid, Magnetic, Fluid-Magnetic, Motor, and Electro-Magnetic, again with corresponding Custom field content of 1,2,3,4,5,6. Add another Radio field and call this one Maximum resistance level with a slug of maximum-resistance-level. This field has 3 options, Low, Medium, and high. Add one more Radio field and call this one Control mechanism with a slug of control-mechanism. This has 5 Options called No Control, Manual Lever on Device, Handlebar Mounted Manual Lever, Handle Mounted Computer, and Virtual Reality. The next field is a Multiple lines field with a name of Description and slug of description. Finally we need three Image fields called Image 1 (slug image-1), Image 2 (slug image-2), and Image 3 (slug image-3), and a WYSIWYG field called Price comparison shortcode (slug price-comparison shortcode).
Save this and we are now finished adding all of our custom fields which will be used in conjunction with our Turbo Trainers custom post type. Click on the Turbo Trainers tab and Add New to see all of your new custom fields ready to be filled in. Figure 3 shows you the Turbo Trainer custom post type edit window.
Figure 3 Turbo Trainers custom post type with associated custom fields.
You have now set up a custom post type, so go ahead and create a new Turbo Trainer post (or whatever custom post type you have set up). When you click Publish on this post and then view your new post you will see that only the Title shows and nothing else. This is because we have not set up a custom post template that will show and format your custom post type. This is done using the Views plugin, and is discussed in detail here in a special post/video.
Custom post types are fantastically useful if you want to add specialist content to a website. The WordPress plugin Types makes this process super easy and also the creation of custom fields to use within your custom post types. At the time of writing the Types plugin is free and you can get if from here. I promise you, once you get your head around how custom post types are used it will make adding new content to your website a breeze and it will allow you to display and categorise different types of content in just the way you want to.