How to override a Divi module?

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.

Published by Eduard

A young and passionate man which loves to build and to customize WordPress Themes. His main passion is to work / improve / customize Divi WordPress Theme from Elegant Themes.

Join the Conversation

8 Comments

      1. Hi Eduard – Any idea how to do this “easily” in 3.x? The only solution I’ve found is creating a custom extension > custom module – none of the “easy” solutions or tutorials work anymore.

        1. Hi Seth,

          Thank you for your visit, right now I didn’t have any time to write anything about this, however I only have a half working solution meaning the custom module it will not work in Visual Builder, only in the backend builder, however since WordPress 5.0 is around the corner the Backend builder will not be available anymore, so the customization it will not work. That was the main reason I postpone any tutorial about this. I will have to wait for the release of WordPress 5.0

      2. Have you written a post about how to do this in divi3? I will need to change Portfolio Title tag (to be not h3 – because of SEO).

        1. Hi Arne,

          I only have a half working solution meaning the custom module it will not work in Visual Builder, only in the backend builder, however since WordPress 5.0 is around the corner the Backend builder will not be available anymore, so the customization it will not work. That was the main reason I postpone any tutorial about this. I will have to wait for the release of WordPress 5.0

Leave a comment

Leave a Reply

Shares
Share This
%d bloggers like this: