Add ACF Taxonomy Fields to the Divi Blog Module Post Meta

Written by Dan Mossop

Enhancing your Divi Blog Module with Advanced Custom Fields (ACF) can give your posts' metadata a significant boost. In this tutorial, we will walk through the process of adding ACF taxonomy fields to your Divi Blog Module post meta.

Step 1: Set Up Taxonomy

First, you need to create a new taxonomy.

  1. Navigate to WP Admin > ACF > Taxonomies.
  2. Click on "Add New Taxonomy".
  3. Create a taxonomy using labels to name it, e.g. "Genres" and "Genre".
  4. Note the generated value of the "Taxonomy Key" – we'll need that shortly.

Save your changes.

Step 2: Add Post to Taxonomy

Now, assign the taxonomy to your post.

  1. Open the post for editing in the back end.
  2. Locate the taxonomy in the editor sidebar (usually below "Categories" and "Tags").
  3. Add terms to the taxonomy that you want to assign to the post.

Update the post.

Step 3: Add PHP Code

Insert the following code to enable and customize your ACF taxonomy fields in the Divi Blog Module.

// === Add ACF taxonomy to blog module meta ===
// src: https://divibooster.com/add-acf-taxonomy-fields-to-the-divi-blog-module-post-meta/

add_filter('et_pb_blog_shortcode_output', 'db_blog_acf_tax_add_article_filters', 10, 3);

function db_blog_acf_tax_add_article_filters($content, $render_slug, $module) {
    if (is_string($content) && isset($module->props) && is_array($module->props)) {
        return preg_replace_callback('/<article id="post-(\d+)"(.*?)<\/article>/s', function ($matches) use ($module) {
            return db_blog_acf_tax_process_article($matches, $module->props);
        }, $content);
    }
    return $content;
}

function db_blog_acf_tax_process_article($matches, $props) {
    $article_html = $matches[0];
    $post_id = $matches[1];

    // Extract current post meta items
    $meta_items = db_blog_acf_tax_extract_meta_items($article_html);

    // Add ACF taxonomy items if the class 'blog-with-acf-taxonomy' is present
    if (isset($props['module_class']) && strpos($props['module_class'], 'blog-with-acf-taxonomy') !== false) {
        $meta_items = db_blog_acf_tax_add_acf_taxonomy($meta_items, $post_id);
    }

    // Add post-meta paragraph if it's missing
    if (!empty($meta_items) && strpos($article_html, '<p class="post-meta">') === false) {
        $article_html = str_replace('<div class="post-content">', '<p class="post-meta"></p><div class="post-content">', $article_html);
    }

    // Replace old post-meta with new
    return preg_replace('/<p class="post-meta">.*?<\/p>/s', '<p class="post-meta">' . implode(' | ', $meta_items) . '</p>', $article_html);
}

function db_blog_acf_tax_extract_meta_items($html) {
    if (preg_match('/<p class="post-meta">(.*?)<\/p>/s', $html, $matches)) {
        return explode(' | ', $matches[1]);
    }
    return array();
}

function db_blog_acf_tax_add_acf_taxonomy($meta_items, $post_id) {
    $taxonomy_key = 'genre'; // <--- CHANGE THIS TO YOUR ACF TAXONOMY KEY

    $terms = get_the_terms($post_id, $taxonomy_key);

    if (empty($terms)) return $meta_items;

    $acf_taxonomy = array_map(function ($term) {
        $term_link = get_term_link($term, $term->taxonomy);
        return is_wp_error($term_link) ? '' : '<a href="' . esc_url($term_link) . '">' . esc_html($term->name) . '</a>';
    }, $terms);

    $meta_items[] = implode(', ', $acf_taxonomy);
    return $meta_items;
}

// === END: Add ACF taxonomy to blog module meta ===

Replace the $taxonomy_key with the appropriate value from your ACF taxonomy screen.

You can add this PHP code to your child theme's functions.php file or use a plugin like Code Snippets.

Step 4: Add Blog Module to Page

Set up the Divi Blog Module to use the new taxonomy.

  1. Add a Blog Module if you haven't already.
  2. In the Blog Module settings, add the "blog-with-acf-taxonomy" class at: Blog Settings > Advanced > CSS ID & Classes > CSS Class

Save the page.

Step 5: View the Result

Finally, check your site to see the implemented feature.

  1. Open the page on the front end.
  2. You should see the taxonomy terms displayed in the Blog Module.

By following these steps, you should be able to successfully enhance your Divi Blog Module with ACF taxonomy fields, adding a powerful layer of customization to your site's post metadata.

Do More with Divi Dynamic Content!

Enhance your site's flexibility with the Divi Dynamic Content Extended plugin. Unlock dynamic content on more module fields and access data from ACF, Meta Box, and Pods settings pages, making your Divi designs smarter and more efficient.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

6 Comments

  1. Hi there.
    I am very interested in the tuto, but I didn't understand how it works.
    I used the code and nothing changed on my blog Module.
    Have an exemple to show?
    Thanks again.

    Reply
    • Hi Pat,

      Thanks for letting me know. Looking at it with fresh eyes, I can see that it wasn't very easy to follow.

      I've just rewritten it to demonstrate the various steps in more detail, add screenshots, and simplify the code so there is only one block of code to add.

      The main things to remember when following it are to change the $taxonomy_key value in the code to match that set in your ACF taxonomy, and to add the "blog-with-acf-taxonomy" class to the blog module(s) you want to display the taxonomy in.

      I hope that helps, but if you need any further help with it, don't hesitate to let me know.

      Reply
      • Great thanks a lot for your help!
        Now I am looking to sort post showed in blog module by one of the ACF filed I created, but I am not sure it could work.
        Thanks or your great tuto.

        Reply
        • You're welcome, Pat!

          It'll probably be possible. What did you have in mind? I.e. which type of ACF field do you want to use and what would be an example of how you'd like sort the blog module based on that field? So, for example, you might say you want to use an ACF date field to store event dates and then sort by most recent event first. It'll likely require custom code and this will depend on those details.

          Reply
          • Thank you.
            Yes indeed it is exactly my idea, to be able to sort event by date, date being a an ACF field.

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest Posts

Set Custom CSS IDs for Individual Divi Accordion Items

Assigning unique CSS IDs to specific Divi Accordion items allows for precise control over styling, targeting, and linking within your page content. This ability is particularly useful when you want to apply custom designs or create anchor links to particular accordion...

Enable Swipe Navigation in the Divi Gallery Lightbox

Enabling swipe navigation in the Divi Gallery module's lightbox allows users to seamlessly browse through gallery images by swiping left or right, creating a more interactive and mobile-friendly experience. This functionality can significantly improve user engagement...

Disable Slide-In Animation for Divi Gallery Grid Images

Control how images appear in your Divi Gallery module by toggling the slide-in animation effect for grid layouts. Disabling the slide-in animation allows gallery images to load instantly and appear statically, providing a faster and distraction-free browsing...

Control Image Count Display in Divi Gallery Lightbox

Displaying or hiding the image count in the Divi Gallery module’s lightbox can help customize the user experience, depending on whether you want to give visitors an indication of gallery progress or prefer a cleaner, distraction-free view. The ability to toggle this...

Hide Gallery Image Titles in the Divi Lightbox Overlay

Displaying image titles in the lightbox overlay of the Divi Gallery module can sometimes be distracting or unnecessary, depending on your website’s design and user experience goals. Hiding these titles creates a cleaner and more focused viewing experience for visitors...

Random Posts