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.

Categories: Divi Blog Divi jQuery Tutorials

A Prequel To Other Tutorials

By now you probably know that we release at least one new Divi tutorial every week. This week we are going to show you how to remove the separators in the Divi Blog module meta text between the author, date, and category. You may have various reasons to do this, and that is great and we hope you enjoy this! But mostly this tutorial sets the stage for our next one, and we are excited to share that with you!

As always be sure to check out our other tutorials, especially our entire Divi Blog module series. You’ll find everything you need and didn’t know you needed there, and if you have any suggestions for new blog related tutorials let me know!

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.

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', " "));

            });

            //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', " "));
                });
            });
        });
    });
</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

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.

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!

Last updated Apr 15, 2021 @ 8:50 pm

That's it!

I hope you have enjoyed learning How To Remove The Divi Blog Module Meta Separators. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Subscribe for more stuff like this.

We release a full tutorial every Tuesday! We also release other helpful tips, freebies, and resources throughout the week. This email list will send you an email when we post a new blog post.

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.

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

6 Comments

Mike on February 26, 2021 at 11:41 am

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
- Nelson Lee Miller (aka The Divi Teacher) on February 27, 2021 at 12:15 pm
  
  I’m not sure how to remove specific ones, sorry, just all of them.
  Reply
Mike on February 27, 2021 at 4:57 am

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
- Nelson Lee Miller (aka The Divi Teacher) on February 27, 2021 at 12:16 pm
  
  That works! I thought about suggesting that but you beat me to it!
  Reply
Mario Ferreira on February 27, 2021 at 11:39 am

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
- Nelson Lee Miller (aka The Divi Teacher) on February 27, 2021 at 12:17 pm
  
  Just to clarify, you are adding the same class to Blog module in a Theme Builder template and it isn’t working?
  Reply