Custom Post Types and Custom Fields within Beaver Builder

CPT and CF have been in WordPress already for a long time. It gives WP developers the power to turn WordPress into a full Content Management System. Not all aspects were that easy as just creating posts and pages. That will change.

• Read all the comments via the Beaver Builder facebook group
• Also follow this subject on Toolset on the Beaver Builder facebook group

First the basics of database publishing. WordPress on its own is based on a database, created in MySQL. The WordPress database consists of many so called tables in which content will be stored in what they call records. A post is a record of a specific content type. Also the menu will be stored in a specific table.

A record consist of fields. Fields are the base of every cell in a records. The title of a blogpost is a field, so is the body of a blogpost. Categories and tags are also fields, called metadata fields, their content says something about the main purpose of the record, defined bij keywords.

Custom Post Types

Without even knowing it, your website might already use so called Custom Post Types (CPTs). These types (recordtypes) do serve some special purposes. A webshop like WooCommerce uses a CPT for defining products/services. Those records consist of extra fields compared to normal posts. For example price of a product, stock of a product, delivery time of a product etc. An event manager uses a CPT for managing events, the fields could exist of booking data, location of an event, date of an event etc.

In more advanced situations tabels are related with each other. You might have a table with records containing fields with data about yourself, like name, address, bank account number etc. Another table might contain your financial transactions like for online banking. The connections between the two tabels is done by your name or by your bank account nummer, which are unique fields, called index fields.

Tools within WordPress

Creating CPTs can be done in many ways with various plugins. The advantage is that you get a smooth user interface to define the various parameters to create the CPT. In most cases the disadvantage is that you need to keep that plugin activated to keep the CPT alive in your WordPress environment. If you don’t want the use of a plugin, you can create the CPT within the functions.php file within your childtheme. GenerateWP offerst a nice user interface to let the code generate for you, based on the CPT parameters you request. Take the time to learn the various parameters, they effect the way the CPT works and used in your back-end. Also the use of taxonomies (like categories and tags in posts) can be generated together with the creation of the CPT.

There are many plugins for creating CPTs, after a while you will prefer to code the creation of a CPT in the functions.php file of your childtheme

Fields

The standard CPT gets in base the titel field and the bodytext field, all other fields you might want, must be created in some way. WordPress offers this, but in practical situations it is not interactive enough. A plugin might help improve the speed of development and the flexibility of the fieldtypes. One plugin, well know for the ease of use in creating fields is Advanced Custom Fields (pro).

However although the plugin lets you create fields very easily, you still need to write your own template files to either display archive or single CPT content, with the fields in it. That step requires more than average PHP knowledge to get the job done. Another plugin ‘Types & Views‘ helps to improve the creation of templates without the need to program.

ACF (pro) also alows the use of shortcodes to display content for ‘simple’ fields

Beaver Builder

Pagebuilders in general work with rows and columns. Each row can consits of one or more columns (content blocks). These blocks can contain various elements like title, plain text, images, sliders, interactive elements/effects etc. Beaver Builder had the possibility to create templates, that is powerful in combination with CPT/CFs.

In Beaver Builder a template can be assigned to a CPT, which can hold various CFs. The challenge is to get the fields in the content blocks.

One of the first steps was done by Robert Turner, who used the ACF shortcodes together with the ‘Code PHP in Widget‘ plugin. The shortcodes which can be used in ACF are limited to some simple fieldtypes like text etc.. For an image ‘real’ PHP should be used. The Code PHP in Widget plugin show that widget box in the modules overview of the WordPress widgets, which can be used in Beaver Builder. Inserting the right PHP code will do the job.

Robert showed a nice example and the potential to use CFs within Beaver Builder. His example was ‘page based’ and could be taken a step further with the use of Beaver Builder templates and use it within a CPT/CFs.

Two developments

Two developers within the Beaver Builder facebook group are developing solutions for using the CPT/CT combination together with templates:

• Didou Schol
• Thierry Pigot

The two solutions use the template concept over Beaver Builder. The solution from Didou is just a little bit further. Existing fieldnames appear in a pulldown list, you don’t need to know them and to type them in. And he also created a template for an archive page of CPT records, with their own set of fields to be displayed. Both solutions are very ‘light weight’ compared to (for example)  ‘Types&Views‘.

Because of their businessmodel they force you to buy the whole package, the Views plugin is needed to make the connection. Types should be enought, because there the CPTS/CF’s can be made and Beaver Builder plugin could take care of all ‘display work’.

Diane Louise posted a simular principe of displaying fields in Beaver Builder using the Types&Views plugin.

Wrap it up

Using CPTs and CFs together with Beaver Builder opens a very nice perspective on how to use WP/BB as a creatively designed content management system. Although not that complex in term of field relations between tables, but many ‘simple to use’ applications could be build and used so much easier than before.