DIVI Blog Module & ACF Together.

in Perfect(ish) Harmony with CPT

So a good friend of mine asked if I’d do a quick website for his car collection. Rather than write a plugin to handle his car collection, I thought I’d use Custom Post Types (CPT) together with Advanced Custom Fields (ACF), then the DIVI Blog Module, simple, since DIVI likes ACF, but as I found out there is still work to do! 

How do you get ACF Fields to show on DIVI Blog Module?

Using the Excerpt to show ACF

Divi Blog Module will only show (as of June 2020) various elements such as Date, Categories, Comment Count etc. and the Excerpt. It’s the Excerpt that I used.

My friend wanted to show an Image (Featured Image), the Price, Availability & a brief intro.

Step 1 – Create your Custom Post Type using the Plugin

CPT Divi Module

How to set Featured Image from ACF Image Field

Step 2 – Create your Custom Fields using the ACF Plugin, in order to make the your image a Featured Image, change the filed name to _thumbnail_id

ACF Divi Module

How to create a Post Excerpt from ACF Fields

Step 3 – I used the Save Post action (https://developer.wordpress.org/reference/hooks/save_post/) to update the Post Excerpt with the ACF fields.

Note that the Post_Excerpt can contain HTML, so I combine the ACF fields for price, availability and intro text with some HTML to produce the result.

Since it’s PHP I use the mu-plugins directory and not in the functions.php file, unless you’re using a child theme.

Divi Module ACF Example

<?php

add_action(‘save_post’, ‘hartley_CustomExcerpt’, 50);
function hartley_CustomExcerpt() {

global $post;

$post_id = ( $post->ID ); // Current post ID
$price = get_field( ‘price’, $post_id ); // ACF field
$intro = get_field( ‘intro_text’, $post_id ); // ACF field
$avail = get_field( ‘availability’, $post_id ); // ACF field
$post_excerpt = ‘<strong>’.$avail.'</strong><br/>’.'<strong>£’.$price.'</strong><br/>’.$intro;

if ( ( $post_id ) AND ( $post_excerpt ) ) {

$post_array = array(

‘ID’ => $post_id,
‘post_excerpt’ => $post_excerpt

);

remove_action(‘save_post’, ‘hartley_CustomExcerpt’, 50); // Unhook this function so it doesn’t loop infinitely

wp_update_post( $post_array );

add_action( ‘save_post’, ‘hartley_CustomExcerpt’, 50); // Re-hook this function

}

Step 4 – Click on the image and the user see the post created using Divi Theme Builder to show all the Advanced Custom Fields.

Using ACF with Divi Module