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

How To Remove The Divi Blog Module Meta Separators

Nelson Miller Pee Aye Creative
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 Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

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

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

19 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
  5. Teo

    Hello Nelson!

    On some websites that I create, some of the posts have more than 1 category. Is there a way to remove the comma between them ?

    Reply
  6. Alejandro Rubalcava

    Great tutorial.
    How about if you want to delete the “By” from all individual posts, not blog modules, but the actual posts?

    Any ideas?

    Reply
    • Alejandro Rubalcava

      Specifically, I am wanting to do this in a Post Title module that I am using in a theme builder template.
      Thanks

      Reply
      • Martin

        Try using the same code, but instead of “.post-meta” write “.et_pb_title_meta_container”.
        It worked for me.

      • Martin

        Try the same code, but instead of “.post-meta” write “.et_pb_title_meta_container”.
        It worked for me.

  7. Britt

    Hi Nelson! Thanks for the fantastic tutorial, as always. It’s already proven useful on quite a few sites for me!

    I think I may have uncovered a small issue though – changing/removing the comma separators affects the date as well. For example, I tried to replace “,” with “•” causing the date to display as “Aug 31 • 2023”

    Do you have any tips on how I can target the category tags only, or at least omit the date from changing?

    Thanks a million!

    Reply
    • Hemant Gaba

      Hi Britt!

      I’m afraid it is not possible to target specific element separators under the Blog module’s meta data. You can try contacting the Element themes support for it.

      Reply
  8. Phil Simon

    Works like a charm. Thanks, man.

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart