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

After

Divi Blog Layout

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.
Divi Blog Layout

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

 

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.

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.

https://gist.github.com/elicus/213c72b464c49d1abda36653b66d4863

The end code will be similar to the screenshot below

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-to-wordpress-post-manually2

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

 

Posted By:
Marshall
Marshall is creative head at Elicus and works with the team to bring ideas to life. He is strongly focused on delivering a quality experience to clients and customers.

2 Comments

  1. 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
  2. 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

Submit a Comment

Your email address will not be published.

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

2 Comments

  1. 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
  2. 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

Submit a Comment

Your email address will not be published.

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

85 Stunning Divi WooCommerce Templates for Your Store

85 Stunning Divi WooCommerce Templates for Your Store

What type of Divi WooCommerce templates are you looking for? A shop page, product page, cart page, or everything? Whether you're behind one or all, you can always find layouts to fulfill the need to enhance a Divi WooCommerce store. Divi Extended is a premium place to...

Introducing the Marvelous Gravity Forms Styler for Divi

Introducing the Marvelous Gravity Forms Styler for Divi

To style and insert Gravity Forms in Divi isn't a simple task. It's a long, step-driven, and complex procedure. You have to deal with Gravity Forms functions, then Divi's, and finally use codes to make Gravity Forms look good. For a non-techie user, it's a nightmare....

How to Add the Instagram Feed to Your Divi Website

How to Add the Instagram Feed to Your Divi Website

Does your client want to add an Instagram Feed to Divi? Or is it only you who wants to improve the website’s engagement by setting up a live Instagram Feed on the website? In either case, it’s a smart move to leverage Instagram’s influence on your customers or...

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Child Theme Divi Header Layouts