Changing Divi Page Builder modules

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

20% Discount!!!
Divi WordPress Theme

This tweak will show you how to properly replace a Divi Page Builder module with your own version, overwriting the default module in the functions.php file with the new version in your child theme. This is great for changing the way the blog module displays posts, the behavior of the portfolio module, or changing any module in general.

First I’ll give you the code so those familiar with PHP can get what they need and move on.  For anyone who doesn’t understand it, I’ll explain it below so you can apply it to your situation.

PHP

UPDATE:

I have updated this tutorial with instructions for Divi 2.4+ below followed by the instructions for versions prior to Divi 2.4.

Divi version 2.4 and up

The first thing you’ll want to do is create a new file in your child theme folder and name it functions.php

Your new file location should be this /wp-content/themes/Divi-child/functions.php

For this example, I’m going to change the Portfolio Module in Divi 2.5.5

Copy and paste the following code into your new functions.php file:

My new custom module changes the portfolio module to link to a custom URL I set in each project using a custom field. I stored the new URL in a variable with this line:

You can change custom_url to whatever you want but it needs to be the same as the custom field name you add to each project. Now just go to your projects, add a new custom field called custom_url and insert any URL you like in the value field. Your image and title should now link to the custom URL.

If you want to change a module other than the portfolio module, use the following guidelines:

  1. Change line 6 in the code above to better reflect the name of your custom module. Basically just copy and paste the original module class but add CHILD_ in front of it.
  2. Change line 371 in the code above to match the new custom class name from guideline 1.
  3. In lines 372 and 373, change et_pb_portfolio to the slug value of the module you want to modify. In the code above, you can see the slug value on line 9. Each module will have a unique slug value. Just make sure you change lines 372 and 373 to this value.

Divi version 2.3.2 and under

The first thing you’ll want to do is create a new file in your child theme folder and name it functions.php

Your new file location should be this /wp-content/themes/Divi-child/functions.php

For this example, I’m going to change the Blog Module in Divi 2.3.1

Copy and paste the following code into your new functions.php file:

In a nutshell, the code above says “Remove the original blog module and replace it with my version”. Now you can make any changes you want and they will not be overwritten the next time you update Divi. I chose the blog module because that is the most common module that I change on a client’s website. Most requests involve changing the order of how the content is displayed. A lot of clients want the title and meta information ABOVE the image, which can all be rearranged in your new function. Just keep in mind this only applies to the blog module. You would still have to change the single.php file and index.php file if you wanted to change how they are displayed on each post and archive page.

Now let’s explain what is happening so you can apply it to other modules.

The first thing you need to know is that the functions.php file must begin with <?php and end with ?>

Then we insert the function that replaces the module with our version:

The override_parent() function wraps all of the code we need to run into one function that can be applied at the right time. When Divi created modules, they used nicknames or shortcodes ie: et_pb_blog. For each shortcode, they created a function with the code necessary to display the module. The shortcode and the function have the same name, which can make the code above confusing. In the remove_shortcode line, we remove the et_pb_blog function from the shortcode. In the add_shortcode line, we add the shortcode back in, but assign it to our new custom function. After the add_action line, we add our custom function.

All we’re doing here is creating a function that first removes the original module and then adds our new module. It doesn’t have to be called ‘et_pb_blog_custom’. It can be anything you like. But the ‘et_pb_blog’ text must be exact because it references the original function and shortcode. You’ll need to find the name of the shortcode in the original functions.php file which I’ll explain later.

The default behavior of a child theme’s function.php file is to load BEFORE the parent theme’s function.php file. This is bad because if it was even allowed, the parent function would override the child function. But since two functions with the same name cannot be declared, you would get an error anyway. So the code above performs two important actions. It tells WordPress to wait until AFTER the parent functions.php file has been loaded to load our function. And then the function that gets loaded is removing the original shortcode and replacing with our new version.

As a side note, Elegant Themes has added code to the functions.php file for many functions to make our jobs easier. If you look in this file and see a function that begins with this: if ( ! function_exists( you are in luck. This more or less tells WordPress that if the function already exists in the child functions.php file, ignore the parent. You can simply copy the function into your child theme, make the changes you want, and it will automatically overwrite the parent. It doesn’t help us in this situation, but a good thing to know for other situations.

Back to replacing the modules. You can use everything you learned from the tutorial above and apply it to any Page Builder module. Using a text editor, search (CTRL + F) for the shortcode that matches the module you want to change. The shortcode will be the ‘et_pb_’ followed by the module name: et_pb_blog, et_pb_number_counter, et_pb_cta (call to action), etc. Once you find the location in the functions.php file, copy the function code and apply the same techniques as above to overwrite it. Here is one more example that would replace the Divider module:

A final but important note is in the situation in which you would want to replace more than one function. To do this, you would want to remove the old shortcode and add the new one in the first function override_parent(). So in the examples above, if you wanted to replace both the blog and divider modules, the override_parent() function would look like this:

You would then follow up with the new custom functions just like we did in each example, making sure each function is wrapped in { } tags. Also remember your child functions.php file MUST begin with <?php and end with ?>.

    47 Comments

  1. The second function in the example must hace a different name.

    Wrong: function override_parent()
    Correct: function execute_override_parent()

    to prevent redeclare function error.

    Great article.

    Jaime

    May 12, 2015

    • Hi Jaime,

      Sorry for the confusion. If you create the functions separately, then yes they need to have unique names. In my example, I combined the removal and adding of two shortcodes into one function so if you follow the tutorial, you would not need a second function.

      Brad (admin)

      May 12, 2015

  2. I’ve been messing with this for hours and I’m just worn out… Creating the Divi-child was quite simple. But, I don’t know PHP and I haven’t been able to grasp what the necessary coding changes are, in the functions.php file, in order to modify the Viewport Meta function.

    Mitch

    May 15, 2015

    • Hey Mitch. Maybe someone can give a better answer but you can try this solution:
      http://www.eleganttweaks.com/divi/add-ability-zoom-mobile-devices-tablets/

      I’m sure there’s a way to do this in a child theme but unfortunately I don’t know how 🙁 You could always put it in your child function.php file and comment it out for reference. /* comments go inside these tags */

      Brad (admin)

      May 19, 2015

      • Brad,

        Yes it would be super simple to modify the code in the Divi functions.php file. But, every time that the Divi theme is updated the modification would be overwritten.

        I wonder why the viewport default is such that it does not allow you to zoom-in using a handheld device. Wouldn’t it make more sense to allow people to zoom-in by default? And, those who don’t want to allow visitors to zoom-in can make an adjustment in the functions.php file… I’m scratching my head as to who wouldn’t want to let visitors zoom-in.

        Mitch

        May 19, 2015

  3. Great article! Could you kindly explain how to make all blog pages masonry by default using the functions page?

    Cheers

    Lambert

    May 22, 2015

    • Have you thought about just saving the page template and using that template on other pages? When you load a template on a new page, you can uncheck the “Replace layout….” and it would just append the sections from the saved template to the current layout in the new page.

      Brad (admin)

      May 26, 2015

  4. Hi Brad,
    Great article!
    Does this also work with Divi 2.4.x?

    Andras

    July 30, 2015

    • Thanks Andras. It does NOT work with Divi 2.4.x. They completely changed the backend in the new version. Hoping to get this updated and possibly release a plugin instead of editing the child function.

      Brad (admin)

      August 6, 2015

      • Any more news on an updated version or the plugin you mentioned? Being able to create your own custom Divi modules would be an amazing plugin that I have been looking for a long time.

        Andy

        September 18, 2015

  5. Hi,

    I want to work this folder includes/builder/main-modules.php on my child theme, i already copied the folder files on my child theme but still doesn`t overide when i tried to test customization the blog module.

    Richard

    November 6, 2015

    • Hi Richard. It doesn’t work like that unfortunately. I’ve updated this tutorial to work with Divi 2.4+

      Brad (admin)

      November 6, 2015

      • Hi Brad,

        So the customization will still work on parent?
        Do you have any alternative way just to make it work on child?

        Thanks,
        Richard

        Richard

        November 7, 2015

        • Yes, the customization will override the default module in Divi. It is possible to have both the default module and a custom module but it’s well beyond a simple tutorial.

          Brad (admin)

          November 13, 2015

  6. Hi,

    This would really be great if this is updated to the latest DIVI theme. I wanted to customize the blog module but I couldn’t do it in the child so all the customization disappears after the parent theme update.

    Cheers

    Jessica

    November 6, 2015

    • I agree Jessica. This was long overdue. Updated 🙂

      Brad (admin)

      November 6, 2015

      • Where? for about 2.5?

        Sebastian

        November 11, 2015

        • The instructions for 2.4+ apply to all versions of Divi 2.4 and up – including 2.5

          Brad (admin)

          November 13, 2015

  7. Is it also possible to ADD a custom module? I have 2 categories of post types: news and calendar. On agenda post items I added a customfield ‘calendar_date’.

    In the blogmodule I would like to display the ‘calendar_date’ field for calendar items but not for the news items. So my idea is to add a second blog module that also displays the calendar_date

    Luc

    November 24, 2015

    • Hi Luc. Adding a custom module is a lengthy and complex endeavor. You could just wrap the calendar_date output in an if is_page statement assuming the two are on different pages: https://codex.wordpress.org/Function_Reference/is_page

      If not, you could wrap the calendar_date field in a span with a class like calendar-date. Then give the news item an ID like #news-items . Then in CSS:
      #news-items span.calendar-date {display: none;}

      Brad (admin)

      December 9, 2015

  8. Hey, when I try to modify the blog post module, so I can have share icons in the blog grid, my css breaks, leaving all of my images really big, and the WordPress admin bar disappears (left as a white space). I’m running Divi 2.4.4

    Matthew Lohmeyer

    December 29, 2015

    • Hi Matthew,

      I faced the same issue. The problem was that I was removing the default code present in the functions.php file which was responsible for enqueuing the parent’s style. Adding back that code made the styles work again

      Prayag

      April 2, 2016

  9. Hi!

    I used the tutorial to customize the blog module with success! However, I would customize an other module (portfolio) in the same functions.php. how to have 2 customs modules?

    Thanks a lot

    Jean-Philippe

    January 4, 2016

    • Maybe you could help me. I am trying to modify the blog module as well, but after following the above instructions, all of my styles break.

      Matthew Lohmeyer

      February 17, 2016

    • Hi, I’m having the same issue right now. I thought just duplicating the process would work, but something is throwing a Fatal error before this line is used a second time:

      add_action('wp', 'divi_child_theme_setup', 9999);

      There’s some fundamental PHP logic I’m missing. Perhaps someone else can share? Pretty please? :DAY

      DAYCG

      March 11, 2016

      • I figured out my issue. It was a matter of nesting the modules one after another and duplicating the remove/add shortcode lines at the end, all within the divi_child_theme_setup function.

        DAYCG

        March 13, 2016

  10. Would it be possible to modify the blog module so that it support other post types, for for example CPTs articles, white_paper, news_item and press_release. These where all CPTs created in Pods.

    Thanks in advance.

    Luke Cavanagh

    January 10, 2016

  11. The changes for Divi 2.4+ aren’t working for me. I have tried to change name of Signup module and no change is taking place.

    Sohaib

    January 16, 2016

  12. Ive try to use the code for 2.4 and up to make the Fullwidth Portfolio module with custom urls but i couldnt do it. Is there any way to help me with it. I use 2.5.3 and I want to use the Fullwidth Portfolio module (carousel_mode) with custom links.

    Thank you!

    Cvetan Antonov

    January 26, 2016

  13. Thanks for this, with a couple of changes it allowed me to output the excerpt for each portfolio item. Great tweak!

    Martin Hadley

    February 9, 2016

  14. Brad, what are you doin’ to me man? I thought we were friends!

    James

    February 11, 2016

    • 🙂 Of course we’re still friends!

      Brad (admin)

      March 15, 2016

  15. I need to change the text of the post listing order i.e. “Popular”, “Latest,””Most rated” to equivalent Danish terms.

    I would love it if you could point me in the right directions as to where this is done?

    Jakob Gad

    February 16, 2016

  16. For anyone having issues with this tweak. I have just tested it with Divi 2.6.4.4 and it still works. Copy the first example exactly above and make a minor change. Put “TEST” inside of the h2 tag on line 314 of the first example and you’ll see “TEST” output in your layout.

    You have to be very careful and follow the directions exactly. For anyone having major issues, disable any caching or minifying plugins and try again. Those seem to be the biggest culprit of causing conflicts with Divi customizations.

    Brad (admin)

    March 15, 2016

  17. Hi and thanks for the tutorilal!

    I succesfully modified the member and blog module with your instructions and saved my changes in a custom plugin..
    But after updating Divi to 2.6 only my changes to the blog module are still there.
    The member module is reverted back to the standard input fields. If i change something in my shortcode_callback i see the changes in the frontend, but the fields in the backend show no modification. Even if i modify the fields or labels in the original main-modules.php, i don’t see any changes. It’s like wordpress/divi doesn’t recognize these changes at all.

    I disabled my caching plugin (w3 total), but it didn’t made any difference.

    Is there a special cache for these modules? What could i do?

    Thanks
    Torsten

    Torsten

    March 29, 2016

    • Ok, seems like i found the culprit.
      The field settings are stored locally in local storage. I deleted them and got my modifications back.

      Torsten

      March 30, 2016

      • Thanks Torsten. Yes, Divi is now caching modules in your local storage to speed up load times so you’ll need to delete your local storage or clear your browser’s cache to see the changes

        Brad (admin)

        May 19, 2016

  18. Fatal error: Class ‘ET_Builder_Module’ not found in my child theme.

    I am trying to customize portfolio module using divi child theme but faced class not found error. Below is my code
    ———————-Custom_ET_Builder_Module_Filterable_Portfolio.php——————–

    class Custom_ET_Builder_Module_Filterable_Portfolio extends ET_Builder_Module {
    function init() {
    $this->name = __( ‘Filterable Portfolio custom’, ‘et_builder’ );
    $this->slug = ‘et_pb_filterable_portfolio’;
    }
    }
    ————————–Function.php———————–
    function divi_child_theme_setup() {
    get_template_part( ‘custom-modules/Custom_ET_Builder_Module_Filterable_Portfolio’ );
    $custom_filtrabl = new Custom_ET_Builder_Module_Filterable_Portfolio();
    remove_shortcode( ‘et_pb_filterable_portfolio’ );
    add_shortcode( ‘et_pb_filterable_portfolio’, array($custom_filtrabl, ‘_shortcode_callback’) );

    }

    Please help my if you have any solution

    add_action(‘wp’, ‘divi_child_theme_setup’, 9999);

    Abid

    March 30, 2016

    • Looks like you forgot the first part of the code. The function itself and then the check if the class exists:
      if ( class_exists(‘ET_Builder_Module’)) {

      Brad (admin)

      May 19, 2016

  19. How do I add a custom field to an existing Divi module? Meaning, how do I add another row in the module setting in the page builder for let’s say another text field that I can later display on the front end?

    James

    July 19, 2016

  20. Hi,
    I’m having issues with this. I’m trying to modify blog modules and fix the sorting of blog.

    I followed your instructions for Divi 2.4 and up…
    However, the output only shows the shortcode of the blog module.

    I tried to remove this code: add_action(‘wp’, ‘divi_child_theme_setup’, 9999);
    The shortcode was gone and the blogs were showing. However, my changes did not refect.

    Please help. Thanks

    Lyzh

    September 15, 2016

  21. Hi,

    I can’t make it work I don’t know if I did it wrong or does this still working on the latest Divi Update?

    Regards,

    Tezah Zulueta

    October 11, 2016

  22. Hi Brad,

    Can you update this to Divi 3.12?

    Tezah Zulueta

    October 19, 2016

  23. Does this work with the Newest Divi?

    Benjamin Pflum

    January 25, 2017

  24. I’ve tried a few suggestions for doing this but yours is the only approach that seems to work in the latest version of Divi. I have this working fine in Divi 3.0.39.

    Thank you!

    Clark

    April 3, 2017

Post a Reply

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