Skip Navigation

Creating Templates to Display Custom Posts in WordPress

In this lesson, you will learn how to design templates for custom post types and for the built-in types in WordPress. You'll see how to display fields in templates, how to create beautiful responsive designs and more.

Duration

What’s a Template?

A template is something that you design once and it controls the way a “group of posts” appear on the site’s front-end. Toolset’s templates work similarly to the WordPress PHP templates, but you design them visually through the editor without having to edit any files or write any code. The templates that you design with Toolset can include fields, taxonomy, related posts and anything else coming from the WordPress database.

How to Design Templates

To build a template, you insert fields, arrange them in any custom layout of your choice, and design how to display them on the front-end.

  1. Go to Toolset Dashboard and click the Create Content Template button in the row of the post type you want to design a template for.
  2. Use the WordPress Block Editor to design your template.
  3. Choose blocks from the Toolset section for any part of the template that displays fields (not static elements). For example, use Toolset’s Heading block for any heading that will display a field.
  4. Enable Dynamic Sources for blocks that should display fields of the post that the template displays.

Here’s an example of displaying the post title in a template for single “property” posts on a Real Estate site.

Displaying the post’s title

That’s it, now you can further tweak your template. For example, you can arrange content in columns, use containers, display parts of the template conditionally, display a list of related posts, create responsive designs, and more.

Add columns to templates

You can easily arrange your template’s content into columns.

Insert the Toolset Grid block and select the column layout you want to use. Then, add blocks to the places inside your columns. If you need to resize the columns, hover your cursor between columns and adjust the width by drag-and-dropping.

Visit the dedicated lesson to learn all about creating responsive columns and grids

Style templates using containers

Putting multiple blocks inside container blocks allows you to add a background to a section, apply custom styling, spacing, and more.

Insert the Toolset Container block and then add any number of blocks inside it. With the Container block selected, use the options in the right sidebar to change the background, typography, content width, and more.

Container block with a background image coming from a Dynamic Source
Container block with a background image coming from a Dynamic Source

Learn more about this topic in the lesson about advanced styling with container blocks.

Conditional display for parts of the template

Sometimes, you want to display information only when certain condition is met. For this, you need to insert the Toolset Conditional block. It acts as a container block but the blocks that you put inside it will only display if the condition is met. You can create conditions based on post data like custom fields and taxonomies, current user role, and more.

Let’s consider a real estate site that offers properties you can buy or rent. In it, we have a custom field call “Tenancy information” and naturally, it’s only meant for properties you can rent. This means that our template for displaying single properties should only display the “Tenancy info” heading and this custom field if that field has any value.

The following two images show two properties, one for sale (no tenancy info) and one for rent (with tenancy info).

Property for sale – no “Tenancy info”
Property for rent – with “Tenancy info”

To achieve this, we use the Toolset Conditional block and set up the condition that checks if our custom field is empty or not.

Displaying content only when the selected custom field is not empty
Displaying content only when the selected custom field is not empty

Read more about this in the lesson about displaying content conditionally.

Change the layout of a template

Theme defines the basic layout of single-post pages on the site. This includes options like the width of the page, displaying of sidebar and the page title, and more.

Here’s an example of using two different layouts for the same page.

Full-width layout – no sidebar
Layout with set width – with sidebar

Using one of the themes integrated with Toolset allows you to control the layout of the single-post template. You can set different layout options for different templates.

If your theme is integrated with Toolset use the following steps to change the layout options:

  1. In the right sidebar, click the Document tab.
  2. Expand the Toolset settings for… section (the last part will be the name of your theme).
  3. Tweak theme options as needed.

Please note that different themes provide different options.

If your theme is not integrated with Toolset, you might try changing the layout options from the Appearance → Customize page, or from the theme’s own settings page.

Your single-post pages might feature a repeatable group of custom fields. For example, shops, gyms, or offices might use it to display their working hours. In this case, you have two fields that repeat: day of the week and working hours for that day. When you edit a post, you can repeat these two fields any times you need, for each working day of the week.

Here’s how such repeatable field group might look on the front-end, showing a working hours for a gym.

Working hours displayed using a repeatable group of custom fields

Similarly, your single-post pages might be connected to some other types of posts. For example, a real estate agent might be connected to a number of properties they are selling.

List of related properties displayed on a single agent post
List of related properties displayed on a single agent post

In both these cases you need to display a list of items. To do this, you need to insert the Toolset View block and create a View. In its wizard, all you need to do is select the repeatable field group or the related post type whose items you want to display.

Selecting to display related posts when creating a View
Selecting to display related posts when creating a View

For detailed instructions, check out the lesson about creating and displaying repeatable field groups or the one about displaying related posts.

Design responsive templates for PCs, tablets and phones

Toolset provides controls to tweak your designs for different device sizes.

Here’s an example of the same template displayed on a desktop computer and a mobile phone.

Desktop
Mobile phone

In the Block Editor, you can switch the backend preview to a desktop, tablet, or a phone size.

You can find the controls for this at the top of the Block Editor when editing any template or a page. You can also find these controls for many individual designing options in the right sidebar, like typography and styling.

Toolset's responsive design controls in the Block Editor
Toolset’s responsive design controls in the Block Editor

Check out the lesson about creating responsive designs with many useful tips.

Preview templates on the front-end

When editing a template, Toolset allows you to easily preview it on the front-end. You can also select which post to preview in the backend editor.

For both, simply use the View with and View on the front-end controls at the top of the template editor.

Post preview controls in the template editor
Post preview controls in the template editor

 

Main Toolset Block Used in this Lesson

Create custom lists of posts

Originally written
May 12, 2020
Updated
January 8, 2021