To use a layout for displaying a single posts of your custom post type, you will need to insert a cell that will render its main content. This is the content that we add to a post using the regular WordPress editing page. Together, Types and Views plugins allow you to do this easily, by inserting shortcodes. These shortcodes then render any type of content you prefer, from the post’s body to the custom fields.
In the layouts that you design for your single posts, you can insert these shortcodes in two ways. Using aVisual Editor cellor a Content Template cell. To insert a shortcode, edit one of these two cells and click on the Fields and Views button, as shown in the following image.
Typical shortcodes to include for posts and pages are Post Title, Post Body, Post Date and Post Author. Post Body shortcode is the most important one. It outputs the main contents of the post.
Creating a layout that displays single posts of a custom post type
The following table shows a step-by-step process for creating a layout that displays single posts of a custom post type (“Books” in our example).
What to do
1. Go to Toolset -> Layouts page
2. Click the “Add new layout” button
3. Give a name to your layout
4. Click the “Change how this layout is used” button
This will open a dialog box where you specify what content you want to use this layout for (single posts, multiple posts, archive pages, etc.)
5. In the layout assignment dialog box that opened:
Expand the Template for multiple pages section
Select your custom post type – in our example it is “Books”
Click the Update button.
6. Insert the Visual Editor cell into the layout
7. Insert Post Title into a Visual Editor cell
Click on the Fields and Views button in the cell editor and select to insert Post Title. Click the Insert shortcode button.
To add a h1 tag to the title, first click the Toolbar Toggle buttonto expand the list of available buttons. Then, select the wpv-post-title shortcode in the editor and select the Heading 1 in the Style menu drop-down.
8. Add another row to your layout and insert another Visual Editor cell
In the layout editor, click on the plus (“+”) button to add another row
Insert another Visual Editor cell into the newly created row
9. Insert Post Body into a Visual Editor cell
Click on the Fields and Views button in the cell editor and select to insert Post Body. In the shortcode insertion dialog box, use the default settings.
Alternatively you could add a Post Content cell in place of the Visual Editor cell added in steps 8 and 9.
10. After finishing the above steps, your layout will look something like this.
11. Now, all the posts from your custom post type are using this layout on the front-end.
Inserting custom post fields into your layout
Now that we created a basic layout for showing single posts of your custom post type, we can do even more. Toolset allows you to easily insert any custom post fields you create with the Types plugin.
Following table shows how we add a custom field called “Number of pages” to our “Books” posts.
What to do
1. Resize the cell that holds the Post Body shortcode.
Position your mouse on the right border of the cell until the pointer changes to the resizing one.
Click and drag your mouse to resize the cell.
2. In an empty space that you just created, insert a new Visual Editor cell.
3. Use the “Fields and Views” button again but this time, insert the custom post field.
4. After finishing the above steps, your layout will look something like this.
5. Now, all the posts from your custom post type also include the custom post field (“Number of pages” in our example).
While the example we used is really simple, the ability to add any custom post fields to your designs gives you the possibility to quickly and easily create any types of layouts for your custom contents.