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 again with instructions for Divi 3.0+

Divi version 3.0 and up

The first thing you’ll need to do is create a new folder inside your child theme, called custom-modules.

In custom-modules, create a new file called cfwpm.php and paste this code inside:

Next you’ll need to 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

In your new functions.php file, add the following code:

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 ?>.