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. Required fields are marked *

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. Required fields are marked *

How to add Google reCAPTCHA in Contact Form 7 in easy steps

How to add Google reCAPTCHA in Contact Form 7 in easy steps

It’s a must that a contact form should have Google reCAPTCHA or any other security options enabled on it. Well, reCAPTCHA is most recommended. It protects your contact forms from getting filled out by bots or spams. And if you want to add reCAPTCHA on your contact...

Divi Content Toggle to display key information in compact manner

Divi Content Toggle to display key information in compact manner

Having long pages with detailed information can delight Google bots, however, for users, it can be a bulky experience. They might find themselves overwhelmed or either confused when looking over pages overtaken by content. Then there comes the Divi Content Toggle...

Create Divi structured data pages easily for Google rich snippets

Create Divi structured data pages easily for Google rich snippets

Having Divi structured data markup pages can help you and your website in many ways. It not only features your web pages as Google rich snippets. But it brings a valuable amount of organic traffic. And it can be done for any website of any CMS, such as WordPress,...

Divi 4 header footer pack

Fill up your details to download the file

Please check your email for the download link.

One Plugin, Many Possibilities

You have Successfully Subscribed!