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!
▶️ Please watch the video above to get all the exciting details! 👆
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 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.
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!
Works like a charm. Thanks, man.
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!
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.
Great tutorial.
How about if you want to delete the “By” from all individual posts, not blog modules, but the actual posts?
Any ideas?
Specifically, I am wanting to do this in a Post Title module that I am using in a theme builder template.
Thanks
Try the same code, but instead of “.post-meta” write “.et_pb_title_meta_container”.
It worked for me.
Try using the same code, but instead of “.post-meta” write “.et_pb_title_meta_container”.
It worked for me.
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 ?
Yes, you’re looking at it 🙂 Notice the 3rd line in the code is removing the comma.
Can’t we do this too?
.dsm-meta-seperator{
display: none;
}
No, what would that CSS class be referring to?
Thank you, work very fine. I noticed this problem ad still can’t solve.
What do you mean?
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.
Just to clarify, you are adding the same class to Blog module in a Theme Builder template and it isn’t working?
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!
That works! I thought about suggesting that but you beat me to it!
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!
I’m not sure how to remove specific ones, sorry, just all of them.