Have you ever wanted to add testimonials, portfolio projects, information directories, or other custom post types and display them in a specific way? You could use a post category to separate this one kind of post, but that gets messy and doesn’t easily allow for much customization.
You could write the .php to declare new custom post types and create the necessary template files to display those post types, but that’s probably more difficult than you would hope.
What’s the easy solution?
Types & Views available in the WP-Types plugin Toolset simplifies the process to create custom post types and custom views for those post types.
This tutorial explains how to set-up and use the WP Types plugin toolset to create your own custom post types and taxonomies, and how to customize the display of both single pages and archive pages.
1. How to Install the WP-Types Toolset
How to demo the WP-Types Toolset plugin package on your very own pre-made test site:
- Go To http://discover-wp.com
- Click the orange “Get Started” button.
- Fill out the register form with a valid email address. You can choose what type of site you’d like to demo the Toolset with. Some custom post types have been set up in the demos. If you’d like to follow along with the rest of this tutorial, we recommend choosing the “Book Review Demo” so there won’t already be a custom post type “Testimonials.”
- Check your Email for an Email with subject line “our new Discover WP account awaits you”
- Click the activation link in that email
- Enter a name for your site and click “Create Site”
- Once the framework installer is complete, you can access your very own new demo site with the entire WP-Types Toolset pre-installed
Already Purchased Types and Views?
If you’ve already purchased Toolset here is how to install Types & Views on your site:
- Log-in to your WP-Types Account and navigate to My Accounts>Downloads
- Download “Types” and “WP Views”
- Log-in to your WordPress site and navigate to Plugins>Add New and click the “Upload Plugin” at the top of the page.
- Browse to views plugin zip file, select “Install Now”, and activate the plugin. Repeat to install the types plugin.
2. How to Create Custom Post Types
- Navigate to Types>Types & Taxonomies
- Click “Add Custom Post Type”
- Fill out the Name and Description Form. I will be using “Testimonials” for an example in this tutorial. Make sure to look through the icons for one that makes sense for your custom post type. Make sure the “Slug” doesn’t include any capital letters or punctuation other than “-“.
- Most of the other fields will not need to be changed. You should look over them to get familiar with all the options. Everything is labeled well. I’m going to enter “5” for the menu position so my custom post type “Testimonials” shows up in my main admin menu right below “Posts.”
- Now you should see your custom post type in the main admin menu on the left. It will have the basic functionality of regular WordPress posts but is completely separate from those posts.
3. How to add Custom Fields to your Custom Post Type
- Navigate to Types>Custom Fields and click the blue “Add Custom Fields Group” button.
- Click the appropriate Custom Fields from the right to add them to your new field group. Make sure to read over the settings. You won’t have to set much.
- Now that you have created your custom post type, added custom fields, and assigned the custom fields to your custom post type you are ready to create a couple posts in that post type. I will create 2 fake testimonials for example. You should create a couple of fake custom posts to follow the rest of this tutorial.
4. How to Customize the Display of Your Custom Post Type(s) for Single Page(s)
- Navigate to Views>Content Templates and select “+ Add New Content Template”
- To create our single page view for our custom post type we will select “Testimonials” under “Single Pages” and name the view “Testimonial Single Page.” Click “Create Template”
- You now have a completely blank template which you will need to add code to to display your single custom post page as you’d like. Views makes this easy and supplies all the codes you’ll need. All you have to do is click the “Views” button at the top of the blank template. Select the items you’d like to display. I will be displaying the Title of the post, the headshot image of the testimonial giver, the first and last name, the company, the type of project, and the main content of the post. I have also hand-placed some HTML for bolding text and inserting line breaks. You also may want to create div classes.
Which creates a single testimonial page view that looks something like this:
5. Customizing Post Type Archive Views
- Navigate to Views>Custom Archives and select “+Create Your First WordPress Archive”
- Select your custom post type from the list, name the custom archive view, and select to create it.
- Your new custom post type archive view will come with some default code to start you off. Click the “Layout Wizard” to easily set-up your custom archive.
- Choose your layout type in the wizard. I used “unordered list” which I later decided was not ideal. I would recommend using “unformatted” for most kinds of custom post types.
- Next choose which fields you want added to each item in the loop. I have chosen to add the fields as shown below.
- Select to replace the current code and click Insert. Add HTML (breaks, headings, bolding etc.) to space things out properly. You can also add text to explain what the field is you are displaying. Save your custom archive. Here is how my testimonial archive looks: