Home » Course lessons » Creating Templates to Display Custom Posts in WordPress
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.
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.
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.
Use the WordPress Block Editor to design your template.
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.
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.
Toolset allows you to display Dynamic Sources, like custom fields, inside any text blocks like headings, buttons, and more. This includes WordPress core blocks, Toolset blocks, and popular block plugins.
To display any Dynamic Source inline, insert or select a block with a text input and look for the Inline Fields button. Dropdown menus will appear, allowing you to select a Dynamic Source.
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.
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
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
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:
In the right sidebar, click the Document tab.
Expand the Toolset settings for… section (the last part will be the name of your theme).
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.
Display repeatable field groups and related posts in the template
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
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
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
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
Styling your single-post templates
Creating a template with Toolset is very easy. It’s also not hard to style it to look professional, but you need to follow certain rules and guidelines.
