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