Today a friend of mine posted a question in an FB group asking if we can place a badge or something like this on the featured images of the blog index page built with Divi Blog Module. First I think it would be easy to create a custom field, place the image URL and call that URL on the featured image hooking this filter post_thumbnail_html. . But Divi blog module calls thumbnails from the module different. It does not use the get_the_post_thumbnail() or so. I tried hard but there was no solution for this. All are inside the Blog Module and we cannot (rather should not) edit any core file. So, I took a workaround.

I have nullified the default Divi Blog Module and created a new one with just only one edit. Below the featured image call, I have added one action <?php do_action('blog_badge_output');?>. This action will get a call from a custom field input which we will create in the edit post screen. Please read on.

Note: I would assume that you’re using a child theme which has a functions.php file. If not, then your changes will be gone when Divi is updated.

You need to perform two steps. (You must have access to your files via FTP or cPanel)

STEP #1

Login to cPanel (or get to your site files via FTP) and locate your child theme directory. Let’s assume your child theme name is – Divi Child Theme.

Download the file below and upload this to that directory. I have named the file blog-new.php. This file will reside with other files, like your functions.php or header.php and style.css files.

STEP #2

Open your functions.php file and paste the functions below. Please make sure you paste them as exactly as given, else, it will cause a fatal error. The code explanation and some screenshots have been given below.

CODE EXPLANATION

In the STEP #1, we just uploaded a new blog module. It has only one edit around this section. You won’t see any changes when you add the Blog Module. All will look and work same.

Just below that you will see an action hook –

The above hook calls a value from the set custom field and execute that. You can also use this hook to add more data to this.

In the SETP #2, we added a bunch of functions. One function divi_new_blog_setup() nullifies the default Divi Blog Module and calls our new blog module which is in the blog-new.php file.

The second and third functions add_badge_mb_post() & save_badge_url() creates a metabox, just like any metabox below the Featured Image Meta box in the edit post screen. In that metabox, you will see a field to add your image URL. Here you need to add the complete URL of your image (say badge image). Once you save or publish the post, the value (which is the image URL) is saved in the database under this meta field badge_url_field. Now we have the data in our database. It’s time to pull that data and display on our desired place.

In the final function call_badge_blog_index(), we are calling the saved image URL and adding some inline CSS to this (you can also add your own CSS). Afterwards, we are hooking this function to our custom action hook blog_badge_output() which we have put in the blog-new.php file. Now, Divi blog module checks if any of its posts has the badge URL and if so, it prints that on the post thumbnail on the index page. It’s so simple.

Hope it helps you. Do let us know if there is any issues. Feel free to modify the function to your needs.

Share This