How can I overwrite a Divi module?

This is one of the most asked questions. The answer is fairly simple, and only requires 10 minutes of your life, but I can assure you that in the end, you will be happy that you spend those 10 minute.

Well to get started you need a child theme. My personal advice is stay way for plugins, that create child themes for you. You can always use my blank Divi Child theme, by downloading it from here: Divi Blank Child Theme.

Once you have download the theme you can follow these steps to activate it:

  • Go to Appearance -> Themes
  • Click on Add New
  • Click on Upload Theme.
  • Choose the zip file, you have downloaded from the link above
  • Click on Install Now button.
  • After the installing was completed, click on the Activate link.

Now once the child theme is activated, you will have to make some little edits. In this example we are going to customize the Divi Module called Portfolio, to link to a custom link, that you specify, or if that link is not specify, it will link to the default project permalink.

All the Divi 2.4 and above modules are in includes/builder/main-modules.php so we are going to copy from that file the Portfolio Divi Module. The code in charge for displaying the portfolio module on your front-end starts at line 5021 and it ends at line 5362 and looks like this:

Using the custom Divi module in your child theme

If you are going to use my child theme, when you login to your FTP server, and navigate to wp-content/themes/DiviChildTheme you will notice a new folder called custom-modules. In that folder, you need to create a new php file called cpm.php (cpm stands for Custom Portfolio Module) and place this code inside:

Next step is to actually make your new child theme, to use our custom portfolio module. To do this in functions.php of your child theme, add this code:

At this point all you have to do, for each of your projects to add a new custom-field called myurl and for it’s value, paste the link you want to be used for that particular project.

Shares
Share This
Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

%d bloggers like this: