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.
- Navigate to WP Admin > ACF > Taxonomies.
- Click on "Add New Taxonomy".
- Create a taxonomy using labels to name it, e.g. "Genres" and "Genre".
- 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.
- Open the post for editing in the back end.
- Locate the taxonomy in the editor sidebar (usually below "Categories" and "Tags").
- 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 ===
Related Post: Adding PHP to the Divi Theme
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.
- Add a Blog Module if you haven't already.
- 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.
- Open the page on the front end.
- 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.
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.
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.
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.
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.
Thank you.
Yes indeed it is exactly my idea, to be able to sort event by date, date being a an ACF field.
Thanks Pat, in that case, perhaps this post will help you:
How to Sort Divi Blog Module Posts by an ACF Field
Give me a shout if you have any questions about it.