Customise Divi Blog Extras to display custom background color for each post

Aug 21, 2019 | Divi Resources

How to customize Divi Blog Extras to display custom background color for each post

Divi Blog Extras adds six new Divi blog layouts to Divi builder which allows creating blog page with a new look and feel. The plugin is also developer-friendly and provides support for overriding the existing layouts in the child theme for further customization.

In this post, we’ll cover how we can modify one of the available layouts of Divi Blog Extras and display custom background color for each post by overriding the layout files. We will use the Grid Extended layout as reference and the end result will look like the following.

Before

Divi blog layout before custom background color

After

Divi blog layout after custom background color

Understanding the concept of overriding Divi Blog Extras layout files.

Divi Blog Extras allows overriding it’s template files. The process works similar to a child theme where header.php, footer.php etc are overridden in child theme and modified. In order to achieve this, we need to download the plugin and extract the zip file. The template files of the plugin are located in the “Divi-Blog-Extras\includes\modules\BlogExtras\layouts” directory.

Extract the zip file of Divi Blog Extras

On top of each file, there is detail about where to copy them in a child theme to override them. In our case, we have grid_extended.php files opened with the detail in line number 5 as per the screenshot below. We need to copy this file to our child theme in /divi-blog-extras/layouts/grid_extended.php to start editing.

Divi Blog Extras template override

In the next two screenshots, we have the grid_extended.php file in the destination folder. One is within the child theme named divi-edu and other is in the Divi theme directly. It can be done to any Divi child theme in same way. The interface could be different at users-end depending. We’re just focusing on the destination of the layout files. In the first screenshot, divi-edu is a child theme and it’s location is domainroot/wp-content/themes/divi-edu/.

Divi Blog Extras layout overriding destination
grid_extended.php file in the destination folder

Modifying the layout files to display custom color background for each post if specified.

Done with the copying of the blog layout files of Divi Blog Extras, the next step is to make the necessary changes to show the specified color on the background as per the sample image above.

Adding code in grid_extended.php layout file

In the grid_extended.php layout file, the line of code that starts with $posts .= ‘<div class=”post-content”>’; will be replaced with the code below.

The end code will be similar to the screenshot below

End code to display custom color background

The above step will complete the process of editing the files and the blog posts are now ready to be displayed as per the specified color within each posts. If no post background color is specified, the default background color will show up.

Specifying color to each post using custom field.

Here is a video on how to add the custom field while editing a post. Don’t forget to add custom color for each post where a unique color is desired.

The name of custom field in our case is ‘postbg‘. The following values could be accepted by it.

  • #fbecec
    pink
    rgba(220, 199, 170, 0.22)

Here is how the custom field values looks like in two different posts. The custom field name is postbg and it accepts hex color code in one and rgba color code in the other.

Add custom field to WordPress post manually
Add custom field value to WordPress post manually

This last step will be required while specifying the custom color for each post and the end result for Grid Extended and Box Extended layouts of Divi Blog Extras is as follows.

Divi blog layout 01 post background color
Divi blog layout 02 post background color
Posted By:
Shoeb
Hi, I'm Shoeb. I've been fortunate to work with WordPress for over a decade and I'm continuously learning from this journey. Alongside some wonderful people, I help run Elicus in Jaipur. Our aim is to make WordPress tools that are simple and helpful.

2 Comments

  1. Max Hoppenkamps

    That is a great tutorial!

    I wonder what I would have to change in the block extended template, so that the featured image on the blog page (not permalink page) links to an URL specified in the custom field “ExternalUrl” (if it is filled) rather than to the permalink page? The title and read more button should still link to the permalink page though, only the featured image should link somewhere else… Can you help?

    Reply
  2. Alan Grant

    Thanks for showing me how this can be done. Great to know you are willing to help customers bring their ideas to reality. I have no hesitation in recommending this plugin and the team behind it.

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 Comments

  1. Max Hoppenkamps

    That is a great tutorial!

    I wonder what I would have to change in the block extended template, so that the featured image on the blog page (not permalink page) links to an URL specified in the custom field “ExternalUrl” (if it is filled) rather than to the permalink page? The title and read more button should still link to the permalink page though, only the featured image should link somewhere else… Can you help?

    Reply
  2. Alan Grant

    Thanks for showing me how this can be done. Great to know you are willing to help customers bring their ideas to reality. I have no hesitation in recommending this plugin and the team behind it.

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi Salon Child Theme to Showcase Beauty Services

Divi Salon Child Theme to Showcase Beauty Services

When you want to register the online presence of your salon or beauty center with Divi on your WordPress website, a Divi salon child theme with attractive pictures is needed. Your search ends here with this beautiful Divi Salon Child Theme to showcase your beauty...

Divi Schema: Boost Website’s CTR to 58% With Rich Snippets

Divi Schema: Boost Website’s CTR to 58% With Rich Snippets

Do you want to improve your page views? Are you looking for ways to improve the appearance of your Divi website’s search results? Well, with the help of Divi Schema, you can do that effectively. Don’t know about Divi Schema? It can help you improve your website’s CTR...

Divi Car Wash Service Child Theme for Car Cleaning Businesses

Divi Car Wash Service Child Theme for Car Cleaning Businesses

When a car washing service comes on an online platform with WordPress and Divi, they need a perfect child theme to highlight their business. This Free Divi Car Wash Service Child Theme can play an ideal role at that time. From displaying washing services to customer...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts