Formidable Visual Views and CPT Templates

Introduction

Custom Post Types (CPTs) in WordPress have been supported since version 3.0. With the release of WordPress 3.1, the ability to use custom templates for CPT displays was added.

Formidable can create CPTs with its Create Post add-on available with any premium license. When you use the Create Post add-on, you can add custom fields to your post/page or integrate form data with custom fields created with Advanced Custom Fields or any other tool or process you use to create custom fields.

Formidable Visual Views is game changer for developers. With Visual Views, any developer can create stunning views and CPT displays. All that's required is a little knowledge of CSS grid and flex box, and before you know it, you'll be creating incredibly useful content displays.

The Formidable knowledge base explains how to Create Posts, Pages, and Custom Posts using the Create Post add-on. It also explains how to map fields and create a view by writing custom content.

This tutorial teaches how to create a CPT that doesn't require any custom fields at all and display the associated form entry with a Visual View added to a custom CPT template.

Developers Directory CPT

When a user enrolls for inclusion in our Developers Directory, a CPT is created so the developer can refer to their own contact information without searching the directory. We create the CPT with the Create Post add-on and only include content that is necessary to create the post. Of course, the CPT definition has to exist first. For this, we use the CPT UI plugin, which is configured as follows:

Take note of the right-most column titled "Template Hierarchy". This is important for naming our CPT template.

Once the CPT is created, you can configure the Create Post add-on as follows.

Notice, we are not using any custom fields in the CPT. We are only using content from the form entry necessary to create the CPT.

We use a separate field in our form for Post Title because of how Formidable manages this field when editing the integrated form entry.

Without adding custom fields to the CPT, the CPT's post id is the only link back to the form entry. When the Create Post add-on creates a CPT, the WordPress post id is saved in the form entry's post_id field that is stored in the wp_frm_items table. See Formidable's Database Schema to learn more.

CPT Template

Here's the CPT template that displays the view using the developer directory content.

This template is named single-developer.php. It is stored in our theme's root directory. Why did we name it single-developer.php? We named it single-developer.php because this is what the WordPress template hierarchy system expects.

WordPress will work through the template hierarchy and use the template file it comes across first. So if you want to create a custom template for your acme_product custom post type, a good place to start is by copying the single.php file, saving it as single-acme_product.php and editing that.

Extracted from https://developer.wordpress.org/themes/template-files-section/custom-post-type-template-files/

To provide more clarity, here's the template hierarchy column from the CPT UI configuration screen for our developer CPT:

Here's the link to the WordPress Template hierarchy Theme Handbook referenced in the image.

Code Walk Through

This site is built upon the foundation provided by the Genesis Framework. Our single-developer.php template is designed to work with the Genesis Framework.

Since no author can predict what development frameworks, page builders, or themes every user that reads this article uses, this code walk through will be useful to get you started with how to create your own template for your specific environment.

The first three lines of this template set the environment for our custom template:

remove_filter( 'the_content', 'wpautop' );
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
add_action( 'genesis_entry_content', 'masterminds_display_developer_details' );

The first line removes the WordPress wpautop function from the content. Wpautop can play havoc with a visual view's display by automatically adding paragraph tags where they don't belong.

The second and third lines are Genesis Framework specific. The second line disables the standard way Genesis displays content using the WordPress loop and the third line tells Genesis to use our custom code instead.

The balance of this template has three custom functions. The callback function for our custom add_action is masterminds_display_developer_details(). The masterminds_get_directory_entry_id() and masterminds_get_entry_id_by_post_id( $post_id ) functions retrieve the entry ID that is passed as a filter parameter to the view.

To see an example of how this works see: https://formidable-masterminds.com/developer/jones-web-designs/