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 a Visual Editor cell or 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.

Inserting post body shortcode into a layout cell

 

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 doScreenshot
1. Go to Toolset -> Layouts pageToolset menu in the main WordPress menu
2. Click the “Add new layout” button"Add new layout" button
3. Give a name to your layoutGiving a name to your new 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.)
 Layout assignment button
5. In the layout assignment dialog box that opened:
  1. Expand the Template for multiple pages section
  2. Select your custom post type – in our example it is “Books”
  3. Click the Update button.
 Assign a layout to a custom post type
6. Insert the Visual Editor cell into the layout 2-insert-the-cell
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 button to 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.
 3-insert-title-shortcode
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
4-create-new-row-add-another-cell
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.
5-insert-body-shortcode
10. After finishing the above steps, your layout will look something like this.6-finished-layout
11. Now, all the posts from your custom post type are using this layout on the front-end.Front-end example 1

 

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 doScreenshot
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.
Resize a cell
2. In an empty space that you just created, insert a new Visual Editor cell.Insert a new cell
3. Use the “Fields and Views” button again but this time, insert the custom post field.Insert custom post fields
4. After finishing the above steps, your layout will look something like this. Your layout after inserting the custom post field
5. Now, all the posts from your custom post type also include the custom post field (“Number of pages” in our example). Your custom posts on the front-end after adding the custom post fields to your layout.

 

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.