The Divi theme comes with a blog module which lets you display a list of posts. You can also show some details along with the posts, such as the author of the post and the categories the post is in. One thing the blog module doesn't allow you to display is the posts' tags. Here's how you can display post tags in the blog module.
First, here's an example of how a post typically displays in the blog module. As you can see tags are not displayed.
Show Tags in the Blog Module using Divi Booster
Divi Booster adds an option for enabling tags in blog modules. With Divi Booster enabled, you'll find the option in the blog module settings at:
Blog Settings > Content > Elements > Show Tags
Enable the option to allow display of tags in the module.
You should now see tags displayed next to your blog module posts, like so:
The option is available in Divi Booster v3.5.5 upwards. It requires PHP 5.3 or higher.
Showing tags on other post types
The blog module now includes an option to display posts from any Post Type. As of v3.9.2, the "show tags" option supports tags on other Post Types, such as projects.
Change blog module tag separator
As of v4.0.3, it is possible to change the separator between tags (from the default comma). When "Show Tags" is enabled, you'll find the option to change the separator at:
Blog Settings > Content > Elements > Tag Separator
If you want have no separator, place a single space character in the Tag Separator field. When the field is fully empty (no space characters, for example), the default comma will be used.
Show Post Tags in the Blog Module using PHP Code
To display post tags in the blog module without using a plugin, first add the following PHP code to your site:
// === Start: Enable tags in blog module ===
add_filter('et_pb_blog_shortcode_output', 'dbc_add_blog_module_article_filter', 10, 3);
function dbc_add_blog_module_article_filter($content, $render_slug, $module) {
if (is_array($content)) { return $content; }
if (!is_object($module) || !isset($module->props)) { return $content; }
if (!is_string($content)) { return $content; }
if (!isset($module->props['module_class']) || !is_string($module->props['module_class'])) { return $content; }
if (strpos($module->props['module_class'], 'blog-with-tags') === false) { return $content; }
return preg_replace_callback('/<article.*?<\/article>/s', 'dbc_apply_blog_module_article_filter', $content);
}
function dbc_apply_blog_module_article_filter($match) {
if (!is_array($match) || !isset($match[0])) { return $match; }
return apply_filters('dbc_blog_module_article', $match[0]);
}
add_filter('dbc_blog_module_article', 'dbc_blog_module_add_tags');
function dbc_blog_module_add_tags($html) {
$match = false;
preg_match('/<article id="post-(\d*)"/', $html, $match);
$id = isset($match[1])?intval($match[1]):false;
if (!$id) { return $html; }
$tags = get_the_tag_list('', ', ', '', $id);
if (empty($tags)) { return $html; }
if (strpos($html, '<p class="post-meta">') !== false) {
$html = preg_replace('/(<p class="post-meta">.*?)(<\/p>)/s', '\\1 | '.$tags.'\\2', $html);
} else {
$html = preg_replace('/(<div class="post-content">)/s', '<p class="post-meta">'.$tags.'</p>\\1', $html);
}
return $html;
}
// === END: Enable tags in blog module ===Related Post: Adding PHP to the Divi Theme
Now, you can add tags to a module by giving it the CSS class "blog-with-tags" at:
Blog Settings > Advanced > CSS Classes & ID > CSS Class
Like so:
Change tag separator
To replace the comma with a different tag separator, you need to find and modify this line from the dbc_blog_module_add_tags function: $tags = get_the_tag_list(", ', ', ", $id);. The second parameter (', ') is the separator, and you can change it to your desired separator. So, if you want to change the separator to a "~" character, the modified line should would like this:
$tags = get_the_tag_list('', ' ~ ', '', $id);Add a prefix to the list of tags
To include some text before the tag list, you can modify the same line of code as just above. The first parameter of the get_the_tag_list function is the one we'd add the prefix to. If you want to add "Tags: " as a prefix, for example, it would look like this:
$tags = get_the_tag_list('Tags: ', ', ', '', $id);
Hi Dan! Thank you a lot for this! I'm trying to implement the code on Divi Extra but seems it doesn't work. Any advice?
Hi Sebastian! I've tested the code with the latest version of the Extra Theme, and it seems to be working correctly on my end.
Are you able to share a link to the page you're working on so that I can look into it further for you?
Also, double-check whether you've added the "blog-with-tags" class to your blog module settings as this is required to trigger the code.
Thanks!
Hi Dan! It shows on Blog Settings on one page, but not on Extra Category Builder which has other components. I'm trying to show tags on Publications Module Settings
Hi Sebastian,
Thanks for reaching out again. I did some checking and but I don't believe there is a "Publications" Module included in the default modules in Extra's Category Builder. This makes me wonder if we might be dealing with a third-party module or possibly a translation issue. Could you please confirm which module you're using as the category builder has a few "blog" like modules? Here's a list of the default modules available:
The Extra Text Module
The Extra Tabbed Posts Module
The Extra Standard Blog Feed Module
The Extra Posts Module
The Extra Posts Carousel Module
The Extra Masonry Blog Feed Module
The Extra Featured Posts Slider Module
The Extra Code Module
The Extra Ads Module
If you're not sure which module it is, please feel free to send a link to the page you're working on and I should be able to figure it out from that.
Once I know I'm looking at the right module I'll hopefully be able to adapt the code to work with it.
Thanks!
Dan
HI Dan!
Thanks a million for providing the code above. It works like a charm!
Hoping you can assist us with a couple of code tweaks:
1. Could you share with us how we could change the code (or add code) to replace the comma (",") tag separator to the pipe character ("|") please?
2. How could we add a prefix, for example "Themes: ", to the list of tags?
Looking forward to your tech wisdom :)
Hey Gilles, Great to hear that the code has been useful for you!
1. Change tag separator from comma to pipe character:
To replace the comma with a pipe "|", you need to find and modify this line from the dbc_blog_module_add_tags function: $tags = get_the_tag_list(", ', ', ", $id);. The second parameter (', ') is the separator, and you can change it to ' | '. So, the modified line should look like this:
$tags = get_the_tag_list('', ' | ', '', $id);2. Add a prefix to the list of tags:
To include a prefix to the tag list, you can modify the same line of code as just above. The first parameter of the get_the_tag_list function is the one we'd add the prefix to. If you want to add "Themes: " as a prefix, for example, it would look like this:
$tags = get_the_tag_list('Themes: ', ' | ', '', $id);Let me know if you need further help with it!
Amazing! It worked perfectly. Thanks so much, Dan. Your expertise is extremely appreciated.
Cheers!
Great! You’re very welcome, Gilles. Thanks for letting me know :)
Can we use the PHP code to display ACF taxonomy on a custom post type?
Hey Albert,
Try this: Add ACF Taxonomy Fields to the Divi Blog Module Post Meta
It's more of a proof of concept than a fully polished feature, so if anything doesn't work the way you'd want it to, let me know. Thanks!
Hello Dan! Do you know if is it possible to separate the meta, for example category above the title and tags below? many thanks and have a nice day!
Hey Federico, always good to hear from you :)
If you just have categories and tags (and nothing else), you should be able to do it with CSS like so:
/* === Split blog module meta above and below title === */ /* Move post meta above title */ .blog-module-with-split-meta .post-meta { margin-top: -66px !important; } /* And move back tags down below title */ .blog-module-with-split-meta .post-meta .dbdb-post-tags { display:block; padding-top: 42px; } /* Hide separator but keep commas between categories */ .blog-module-with-split-meta .post-meta { visibility: hidden; } .blog-module-with-split-meta .post-meta a, .blog-module-with-split-meta .post-meta span { visibility:visible; } .blog-module-with-split-meta .post-meta > a:not(:last-of-type):after { content: ','; } /* === END: Split blog module meta above and below title === */Give any modules you want this to apply to the class "blog-module-with-split-meta". You'll probably need to adjust the margin / padding to suit your layout. I'd suggest starting with the margin to get the categories in the right place, and then adjusting the padding to get the tags back below the title.
I hope it helps, but give me a shout if you need any help getting it to work.
Cheers!
Does this still work? I can't seem to get it to go. Class applied to module and code pasted in functions.php. I also tried tuning the categories on to see if that was required. No go.
Hey Daniel, this is still working on my test site… Is there any chance you're able to share a link to the page you're working on so that I can take a look for you and see if I can spot the issue? Thanks!
Hello. For the section "Show Post Tags in the Blog Module using PHP Code," is that PHP meant to be added to the functions.php file?
Hi Zachary. Yes, you can add it to the functions.php file of a child theme. You could technically add it to the functions.php in Divi itself (i.e. not in a child theme), and it would work – however, I wouldn't recommend this as it will be overwritten with the next Divi update. If you don't use a child theme, then another option is to add it via a plugin such as code snippets. Hope that helps!
This is great, thank you!
Is there a way to make it apply only to certain blog modules across the site?
You're welcome, Amanda! I've just updated the PHP code method in the post above so that now it will only apply to blog modules if you give them the "blog-with-tags" class. That way you can selectively apply it wherever you need it. I hope that helps, but give me a shout if you have any questions about it. Thanks!
How do I remove the commas between the tags? My client does not want them there
Hi Etienne, I'm adding an option to change (or remove) the separator in the next version (v4.0.3). I have some more testing to do, but will hopefully be able to release it in the next few days. I'll update here as soon as it's ready. I hope that helps.
Hey Etienne, I've just released the update (v4.0.3). When "Show Tags" is enabled, you'll find the option to change the separator at:
Blog Settings > Content > Elements > Tag Separator
If you want have no separator, place a single space character in the Tag Separator field. When the field is fully empty (no space characters, for example), the default comma will be used. I hope the update helps, but please let me know if you have any questions about it. Thanks!