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.
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.
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.
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.
Note that we are not using Layouts in this example, which illustrates how to create a Content Template with Views.
If Layouts is active on your site the next step will create a template using Layouts and not a Views Content Template, and so the details of the subsequent steps would be different. See this page for a description of creating a template with Layouts.
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.
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.
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.
With a Toolset account, you will be able to build sites for yourself and 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.