When building a website, layout details matter. By default, the Divi Blog module offers a standard string of post metadata: Author | Date | Category.
While this works for standard blogs, many modern layouts require a cleaner, more focused approach—specifically stripping out the author name and category, and instead displaying a simple Date | Tags format.
Surprisingly, Divi’s built-in module toggles do not support displaying post tags instead of categories. Furthermore, standard WordPress loop hooks often fail to intercept the data because Divi compiles its modules through its own internal shortcode rendering engine.
To solve this cleanly without modifying core files, we can intercept the module’s compiled HTML right before it renders using a single PHP filter.
The Solution: Filtering Divi Shortcode Output
Instead of rewriting template files in a child theme, we can utilize the et_pb_blog_shortcode_output filter. This allows Divi to process the blog module normally, and then lets us perform a precise, server-side string replacement on the metadata HTML wrapper.
Add the following function to your child theme’s functions.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/** * Override Divi Blog Module Meta to display Date | Tags via shortcode filtering */ function custom_divi_blog_module_meta( $content, $render_slug, $module ) { // Only target the main blog module shortcode if ( 'et_pb_blog' !== $render_slug ) { return $content; } // Match each article element inside the module output return preg_replace_callback( '/<article[^>]* id="post-(\d+)"[^>]*>.*?<\/article>/s', function( $matches ) { $article_html = $matches[0]; $post_id = $matches[1]; // 1. Generate the date string $date = get_the_date( '', $post_id ); // 2. Generate the comma-separated tag list links $tags_list = get_the_tag_list( '', ', ', '', $post_id ); // Construct the exact custom meta block if ( $tags_list && ! is_wp_error( $tags_list ) ) { $new_meta = '<p class="post-meta">' . $date . ' | ' . $tags_list . '</p>'; } else { $new_meta = '<p class="post-meta">' . $date . '</p>'; } // Replace the old meta block layout cleanly with our custom structure $article_html = preg_replace( '/<p class="post-meta">.*?<\/p>/s', $new_meta, $article_html ); return $article_html; }, $content ); } add_filter( 'et_pb_blog_shortcode_output', 'custom_divi_blog_module_meta', 10, 3 ); |
How It Works Under the Hood
1. Targeting the Right Module
The function checks the $render_slug variable against ‘et_pb_blog’. This ensures that the code only runs when processing a Divi Blog module, leaving other page elements entirely untouched.
2. Isolate Individual Posts via Regular Expressions
Because a single blog module can display multiple posts in a grid or list, the code uses preg_replace_callback to loop through every block in the rendered HTML output. By targeting id=”post-(\d+)”, it dynamically extracts the exact dynamic database ID ($post_id) for each post in the loop.
3. Fetching Dates and Tags Programmatically
Armed with the correct $post_id, the script calls two native WordPress template functions:
-
get_the_date() to pull the publication timestamp.
-
get_the_tag_list() to gather all tags associated with that specific post, formatted as a clean, comma-separated list of anchor links.
4. Rewriting the Node
Once the new metadata structure is compiled into a simple Date | Tags string, a final regular expression locates Divi’s original … markup block inside the article HTML and swaps it seamlessly with our newly defined layout structure.
Benefits of This Approach
-
Performance Friendly: By executing a regular expression on the backend before the page is delivered, the layout changes instantly without relying on heavy JavaScript transformations or layout shifts on the frontend.
-
Child Theme Safe: Because this code lives inside functions.php, you won’t lose your customizations when the core Divi theme updates.
-
Fallback Protection: If a post doesn’t have any tags assigned to it, the if statement safely catches the omission and falls back to displaying only the publication date, preventing broken or dangling pipe separators (|) in your UI layout.
