How to add custom types efficiently to themes that have page builders
Themes that come with page builders make it easy for you to design the content part of your page. However, sooner or later, you will find yourself constrained by the limitations of using WordPress regular posts and pages, especially if you use them to add repeatable elements such as portfolio items, services, courses, testimonials, staff members, etc.
Custom Post Types can provide a solution to this problem. This article explains the benefits of using and Custom Fields, and the method of adding them efficiently to themes such as Avada or Divi.
Pages or Custom Posts – how would you get started?
Let us assume your site is supposed to display information about Consultants. You need a page that lists all the Consultants. Further, you want each Consultant item to link to an individual Consultant’s page:
There are several options to implement this on your WordPress site.
Most page builder users would get started on creating WordPress regular pages for each Consultant. Then they would insert all Consultant details directly in the page body, using drag-and-drop elements provided by the page builder.
To group all the Consultants together, they could create a parent page.
While this solution might seem to be the most straightforward one, it has some limitations.
Limitations of using WordPress regular pages for storing repeatable items:
- Consultant pages are mixed with other WordPress pages.
- It is difficult to link the parent page to child pages (you need to insert each link manually).
- When you add a new Consultant, you need to remember which Parent page to assign it to.
- If you are using templates provided by Avada Theme Fusion Builder or Divi Builder, you need to remember which template to choose and assign.
- Changes made in such templates will not be reflected in the already existing pages that use this template.
Using Custom Post Types (recommended)
The more efficient way to store the information about your Consultants is to create a dedicated Custom Post Type with Custom Fields.
Benefits of using Custom Post Types and Custom Fields
- Quick access to your data – content editors will reach Consultant data quickly, and they will not mix them with other data on your site
- Adding a new post is easy – you just focus on entering data. In addition:
- your custom fields may have additional descriptions
- your custom fields may have extra validations
- you can feature some fields as columns (see Consultant pictures in the screenshot above)
- you can connect your post types in relationships with other custom post types (for example, show a Consultant’s Testimonials in the Consultant edit screen, assuming Testimonials are also stored as custom posts)
While adding add new custom posts (Consultants), you do not need to worry about the content layout and formatting, or which parent page and template to assign. It will be handled automatically.
This is because displaying content is separated from managing your data. To make it happen, all you need to do is to create relevant templates.
Adding Custom Post Types and Custom Fields
Creating Custom Post Types and Custom Fields is easy when you use the Toolset Types plugin.
Adding a new Custom Post Type – steps to follow
- Go to Types -> Post Type and add a new Post Type (Consultant).
- Go to Types -> Post Fields and add a new group of fields (e.g., Consultant details).
- Add Custom Fields (e.g., picture, role, office hours) together with their descriptions and validations.
- Assign this group of fields to your Custom Post Type (Consultant in our case).
- Optional: you can create a custom taxonomy and assign it to your Custom Post Type.
Now your new Custom Post Type shows up in the back-end as a separate menu item. Go ahead and add your posts.
Creating templates for single custom post pages
If you view any of your Consultant posts on the front-end, its single post page is displayed. This page uses a template. By default, your theme displays only the post title and body.
Using Toolset, you can create your own, fully customized templates for single post pages. You create such a template once, and it will be used for all your Consultants.
If you have the required Toolset plugins installed:
- Go to Layouts and add a new Layout.
- Choose it to be used as a template for Consultants.
- Design your layout by adding rows and columns.
Benefits of creating a template for single custom post pages:
- You create the template once. Whenever a single Consultant post is displayed on the front-end, this template will be used automatically.
- Editors will not damage the layout accidentally. The layout is edited separately from the content and is available only for users with relevant access privileges (for site admins by default). That eliminates the risk of users accidentally changing layouts.
- Changes in layouts are quick and harmless. If you decide to change anything in your layout (e.g., switch rows, narrow a cell, add another cell) or in the formatting (e.g., enlarge some headings or change their font to bold), you make the changes in one place, at the template level. The changes will be reflected automatically in all pages using this template.
Your cells can display more advanced elements, such as other Views or CRED forms created with Toolset.In our example, below each Consultant we display:
- Consultant Testimonials as a View (Testimonial is a Custom Post Type, in a parent-child relation with the Consultant CPT)
- four other randomly chosen Consultants – another View created with Toolset
Creating archive pages for Custom Post Types
Custom Post Archives are pages that show lists of custom posts. Each single post of the archive page, typically the post title, is a link to a detailed page of that post.
The archive page for the Consultant Custom Post Type will list all the Consultants; the Consultant name is a link to a single Consultant page (covered above in this document).
Custom Post Archive pages are useful for visitors and crucial for SEO – they act as an index (a container) page for all single post pages of a given Custom Post Type, helping search engines (such as Google) to understand the structure of your site.
- Visitors can see all the custom posts together in a compact form, and quickly reach the individual post pages if needed.
- When you add a new custom post, it will appear on the archive page automatically.
- Better SEO, especially if you use breadcrumbs on the single post pages linking backward to their archive page.
- You can display your items in a particular order (by post date, post title, etc.).
Toolset allows you to create custom archive pages for a Custom Post Type directly from your WordPress admin without PHP programming.
required Toolset plugins installed:
- Add a new layout
- Include the Archive cell
- Add other rows and cells if needed
- Use the “Change how this layout is used” button to assign the layout to your Custom Post Type (Consultants in our case)
Adding lists of custom posts to your homepage
You can create and display your custom posts in different combinations all over the site.
For example, you can include a list of all your Consultants in your homepage. Another example would be to display some randomly chosen Consultants in a Consultant single page.
To include a list of selected custom posts in your Layout, use a View cell. You can create a new View or use an existing View.
Whenever you need to use repeatable pieces of information on your site, such as portfolio items, services, testimonials, courses, staff members, etc., consider using Custom Post Types instead of regular WordPress pages.
It will allow you to separate content editing from content display. Your site editors will focus on editing data while the visible part will be handled automatically by dedicated Layouts used as templates.
How about you?
Do you use Custom Post Types when you build websites with themes such as Avada and Divi? Please share your experience with us.