Show Tags in the Divi Blog Module

|

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

The following code will cause post tags to display in the blog module.

    // === Start: Enable tags in blog module ===
    add_filter('et_pb_blog_shortcode_output', 'dbc_add_blog_module_article_filter');

    function dbc_add_blog_module_article_filter($content) {
        if (is_array($content)) { 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 ===
Note that this code will apply to all blog modules on the site.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

3 Comments

  1. How do I remove the commas between the tags? My client does not want them there

    Reply
    • 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.

      Reply
      • 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!

        Reply

Submit a Comment

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