How To Remove The Divi Blog Module Meta Separators Tutorial by Pee Aye Creative

How To Remove The Divi Blog Module Meta Separators

In this tutorial I will show you how to remove the meta author, date, and category separators from showing in the Divi Blog module.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Remove The Divi Blog Meta Separators With jQuery

Most of our tutorials involve CSS snippets, and that is all well and good. But sometimes we need to get a bit more serious in order to hack Divi the way we want. To remove the word “by” before the author or the “pipes” | between the blog meta text, we need to use jQuery. If you are new to jQuery, don’t worry, this tutorial and video will show you exactly what to do!

Add The Custom Class

The first thing to do is add a custom CSS class to the blog module. This way you can target that specific blog module on your site with the code, meaning it will only affect the Blog modules with the class. So go to the Blog module settings>Advanced tab>CSS IDs & Classes and add “pa-remove-meta-separators” to the CSS Class input field.

add the custom class to the Divi blog module to remove the meta separators

Where To Add The Code

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the “Add code to the < head > of your blog” code area.

<script>
    //Remove meta seperator pipes (|) and by from Divi Blog module meta
    jQuery(function($) {
        $(document).ready(function() {
            $('.pa-remove-meta-separators .post-meta').each(function() {
                $(this).html($(this).html().replace(/\|/g, " "));
                $(this).html($(this).html().replace('by', " "));
                $(this).html(jQuery(this).html().replace(/,/g, ""));
            });

            //Do the same for ajax with pagination enabled
            $(document).bind('ready ajaxComplete', function() {
                $('.pa-remove-meta-separators .post-meta').each(function() {
                    $(this).html($(this).html().replace(/\|/g, " "));
                    $(this).html($(this).html().replace('by', " "));
                    $(this).html(jQuery(this).html().replace(/,/g, ""));
                });
            });
      });
    });
</script>

Here is an example of adding the code to the Divi>Theme Options>Integrations area. Once you save the changes, the meta blog separators will be removed.

where to add the jquery code in Divi Theme Options to remove the blog meta separators

NOTE: I added the third line in the snippet to remove the commas between categories after the original post and video were published.

You could also add the code to a Divi Code module directly on the page if you prefer.

Customizing The Snippet

You may only want to remove the word “by” or you may only want to remove the pipe separators. No problem! You can simply remove one line or the other from the code. You should be able to spot the line of code for the pipe and the second line for the ‘by” and you can remove either one to your meet your needs. You can also remove the third line that removes the commas between the categories.

I recommend watching the video to make sure you follow this correctly and get the most amount of learning out of this tutorial. Let me know in the comments if you enjoyed this!

13
Last updated Aug 31, 2021 @ 11:04 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

8 Comments

  1. Mike

    Hi Nelson,

    Is there any way to only remove the separator after the author vcard class without going into the php? I cannot seem to figure it out.

    Thanks!

    Reply
  2. Mike

    UPDATE:

    To fix the issue below, I just added a pseudo-element (::after) to the author class and added my own content! Not sure if you no an easier way with just slightly changing the code in this article?

    Thanks anyway!

    Reply
  3. Mario Ferreira

    Hello, and thank you, work very well. Just one problem I noticed ad still can’t solve.

    When we navigate to a specific category it doesn’t work. Do you have any idea on how to solve this?

    Thank you.

    Reply
  4. Alissa

    Can’t we do this too?

    .dsm-meta-seperator{
    display: none;
    }

    Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart