Show related posts in Beaver Builder from one CPT to another with ACF Relationships

Showing related posts in Beaver Builder from one Custom Post Type to another is possible with an ACF Relationship field and Beaver Themers Post Module and relationship field connector from version 1.1.1.

You can also use the Post Slider and Post Carousel Modules.

This tutorial uses 2 CPTs, ‘Lights’ and ‘Projects’, the intent is to show the ‘Lights’ used in each ‘Project’ so the reader can click the link back to see the light from a project CPT. (This is also easily done using the default ‘Post’ type with another CPT.

First up is to create a ACF Relationship field for the ‘Lights’ CPT and display it on the ‘Projects’ CPT post admin backend.

 

So above a field name is given and the ‘Relationship’ field type is selected, The Lights CPT is selected as the filter in ‘Filter by Post Type’ and also a custom taxonomy used in the Lights CPT is also selected, this will allow the user to filter posts by taxonomy.

This field group is then assigned to appear on the Projects CPT.

Relationship Field in Back End of Custom Post type

Now in the Projects CPT post the relationship field is visible, the posts can be search for or filtered by taxonomy, then when selected move the Light post types from the left to right dialog boxes to indicate that they are the related posts.

Displaying the Related Posts from Beaver Themer

The code used to output the related posts can be selected by using a Post Module in a Themer layout, in the ‘Content’ tab and selecting the ACF Relationship field – then add in the custom field name, as known as the key.

You can further refine the layout by doing a Custom Post Layout in the Layout tab, here I am just outputting the titles only of the related posts.

A list of clickable lights on each project post type.

 

Bi-directional Related Posts

It is possible to link posts bi-directionally with the use of an ACF plugin ACF Post-2-Post available also on WordPress plugin repo.

To enable the functionality between the 2 CPTs you create a new ACF field group and set up the relationship field on the other CPT using the same field name – in this case ‘tl_project_lights_link_used’ – also you have to add the ACF Relationship field via Beaver Themer post module on the other CPT Themer template.