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:
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!