When you use templates for custom post types, you make it easy to edit content and design its appearance on the front-end. Without templates, you may need to duplicate the design of items, rather than doing so only once.
How Templates Work With Custom Post Types and Fields
Let’s say that you have created a custom post type called consultants that has a few custom fields, such as hourly rate, email, and phone. To organize the consultants, you have also created an areas of expertise taxonomy.
For example, here is our list of consultants in the WordPress admin:
Now, let’s say that you want to display the consultants on the front-end like this:
You need to create a template that displays all the consultants on the site’s front-end. The template will include the fields that you want to display, along with the visual design. For example, our template wraps the title (the consultant’s name) in an H1 tag.
Toolset allows you to design templates in one of several ways:
No matter which one of these options you prefer, the end result is the same. You will design one template that displays everything belonging to that custom post type.
Templates Allow You To Separate Content Editing and Display
When you use templates to design the content of your site, you completely separate how that content appears for editing and how it is displayed on the front-end.
In the WordPress editor, consultants are displayed with their fields conveniently separated and explained:
Editors don’t need to worry about how that content appears on the front-end. The template will tell WordPress how to display these items on the front-end.
Designing Templates for Custom Post Types with Toolset
Ready? Let’s get started. First, you will need to install the required plugins:
- Toolset Types – Types lets you set up custom types and fields
- Toolset Views – Views lets you display custom types and fields (and create templates for them)
Both Types and Views are included in the Toolset package.
1) Create a blank template for the custom post type
Go to Toolset->Dashboard. You will see a list of the custom post types already created in your site:
You will notice that the Template column displays a warning. It tells us that there is no template yet. Click on the button to Create template and you’ll go to a blank Content Template editing page.
2) Add fields to the template
Click on the Fields and Views button to see a list of everything that you can include in the template.
This list includes everything that you may need to display in a template. It includes the basic fields that every post has (title, body, excerpt, URL, etc.) and custom fields that are unique to this custom post type.
Once you insert a field, it will appear as a shortcode. For example, this is how the editor looks after I’ve inserted the “consultant image” custom field:
You can use any HTML around shortcodes to add styling. For example, I’d like this image to appear inside a DIV with a call “column-left”, so I just add that HTML around the field’s shortcode.
Similarly, I’ll add the rest of the fields and style around them with HTML.
3. Adding CSS styling for the template
The templates that you design can use the CSS classes from the theme, but you can also add CSS directly into the template editor. This way, you can tweak CSS while editing the HTML, without needing to update the theme or upload CSS files to the server. For our sites, the “heavy” CSS goes to the theme and we use the CSS editor in the Content Template for tweaks.
Here is how our entire template looks, including the fields, HTML and CSS:
And, finally, a consultant custom post type, on the front-end, using the template that we’ve designed.
Want to start building templates for your custom post types?
With a single account, you will be able to build as many sites as you need for yourself and for your clients. Our 30-days refunds give you the peace of mind, knowing that if you don’t like our approach to building sites, you get all your money back.