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.

Templates for entire custom post types
Toolset enables you to design templates for entire custom post types easily

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:

Listing Page of our Custom Post Type “Consultants”
Listing Page of our Custom Post Type “Consultants”

Now, let’s say that you want to display the consultants on the front-end like this:

Build One Template For All Posts Of The Same Post Types

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:

Toolset - Custom Fields And Taxonomies On A Custom Post Editing Page
Toolset – Custom Fields And Taxonomies On A Custom Post Editing Page

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:

The Toolset Dashboard with a single custom post type (consultants)
The Toolset Dashboard with a single custom post type (consultants)

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.

Blank Content Template
Blank Content Template

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.

Fields that you can insert into a template
Fields that you can insert into a 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:

The Content Editor with one field
The Content Editor with one 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.

HTML around field for styling
HTML around field for styling

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:

Complete template with fields, HTML and CSS tweaks
Complete template with fields, HTML and CSS tweaks

And, finally, a consultant custom post type, on the front-end, using the template that we’ve designed.

The custom post type displaying with our template
The custom post type displaying with our template

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.

Buy Toolset – $149