wpthemedetector-logo
WordPress Theme Detector Blog
customize-divi-divi-children-customizer

Divi Children plugin: Customize Divi easily through a child theme

42 comments

Today I´m going to talk about a plugin developed to automatically create child themes, but specifically for a particular parent theme: Divi, by Elegant Themes.

Let me tell you in the first place that this review can´t be unbiased, but that is just because I happen to be the creator of this plugin. However Divi Children is a free plugin, so I hope you will not mind a little enthusiasm from the developer.

Although the plugin will only be interesting for users of the Divi theme, there are lots of Divi users out there already. So I thought the recent release of the new 2.0 version of the plugin might be worth a little review on this blog, as it brings a lot of new features to customize Divi very easily and without writing a single line of code.

What is Divi Children?

Divi Children is a free plugin available for download at my site dedicated to the Divi theme, divi4u.com. The plugin was developed to help Divi users to easily create child themes of Divi at the click of a button.

The first version of Divi Children automatically grabbed the information about you and your site, and included a function to customize your footer credits. It also allowed you to change the default screenshot and included a patch for a Divi issue and a couple more convenient features.

But that is not what I had in mind when I started the Divi Children project. As I stated on my post Divi Children 2.0 sneak peek: Customizing Divi even further, without code, the real purpose of Divi Children is to help you customize Divi to a much broader extent.

I don´t like the Divi sites out there looking pretty much the same (and that is precisely what Divi detractors hold as the main argument against Divi). So the way I devised to fight that was by using child themes, and more particularly by using a plugin that could create highly customizable Divi child themes.

After the new version 2.0 was released, Divi Children has become more than just a child theme creation plugin. Of course, it automates the process of creating a child theme. But the child themes created by Divi Children are not just empty, blank child themes but child themes that come with a lot of features to help you customize Divi. Those customizing features are handled by the Divi Children Engine that is installed by the plugin for every child theme it creates.

Aditionally, Divi Children 2.0 allows you to automatically update your Divi child theme to make sure you get access to all the new customization capabilities brought by the Divi Children Engine.

And that applies not only to child themes created by Divi Children, but to any child theme of Divi, even if it was manually created by you!

The Divi Children Engine

The Divi Children Engine is a pack of php files, bundled together in a separate folder within your child theme. It will take care of a lot of things to help you customize Divi very easily, without having to touch a single line of code and previewing all your changes thanks to the WordPress Customizer.

Apart from all the customizing capabilities provided by it, the awesomeness of the Divi Children Engine relies in that all its code is kept separated from the rest of your child theme files. That way it can be updated at any time to include new features or to comply with future new versions of Divi, without messing your child theme files.

customize-divi-update-divi-children-engine

Customize Divi by means of the WordPress Customizer

Every child theme created by Divi Children 2 will have a number of customizing sections available for you in the WordPress Customizer (in fact, every Divi child theme that includes the Divi Children Engine, whether it was originally created by Divi Children 2.0, by an earlier version of Divi Children or by yourself manually).

The first customizing sections packed with Divi Children 2.0 are:

  • Main Footer
  • Footer Bottom
  • Footer Credits
  • Main Sidebar
  • Post Meta Data

You can get more details about the settings available for each of this sections and watch them in action on my Divi Children 2.0 release post. As an example, here is an animated image to show you what you can do in the case of the Footer Bottom:

customize-divi-footer-bottom

Customize Divi with Divi Children Custom Selectors

The Customizer setting sections mentioned above are available for the entire site, but the Divi Chidren Engine also include some custom selectors and codes that can be used to customize Divi modules separately.

When editing pages, you´ll find at the right hand side of the Page Builder a collapsible box named “Divi Children Custom Code” where you can create some custom CSS classes and IDs that you can paste on Divi modules to customize them one by one.

customize-divi-custom-codeThe Divi Children Custom Classes and IDs are predefined selectors developed to customize Divi modules. Divi Children 2.0 comes with the first pack of custom selectors that include the following:

  • Sections with Custom Rows
  • Custom Full Width Headers
  • Custom Call To Actions
  • Custom Sidebars

And the good news is that you can create as many of each of these custom selectors as you want, therefore extending the customizing capabilities to no end.

For instance, you may want to have two different types of Full Width Headers with different styles on various pages of your site, or even on the same page for that matter.

Customize Divi with Divi Children Magic Codes

Also available in the “Divi Children Custom Code” box you will find what I´ve named “Magic Codes”. These are IDs that don´t affect the CSS but the functionality of some Divi modules.

Every Divi module form comes with a couple of fields for custom selectors: “CSS ID” and “CSS Class“. So, in the modules for which we want to change their functionality, why not leave “CSS Class” for real CSS customization and use “CSS ID” to tell Divi that we want the module to do something different?

That´s where the name Magic Codes comes from: We´ll be using CSS selectors to do things that may not be related to CSS at all, but it works!

For instance, by pasting the newest_post_feed and the no_newest_post_feed Magic Codes on the “CSS ID” field of different Divi Blog modules you can force the blog feeds to display the most recent post only or just the opposite, all posts except the most recent one:

customize-divi-magic-codes

Many more customizing options to come

Divi Children 2.0 is just the beginning. The flexibility brought by the Divi Children Engine and the new install/update system will allow for lots of other cool things to help you customize Divi through your child themes.

The main hard work is already done, so it will be much easier now to add more Customizer sections, as well as new Custom Selectors or new Magic Codes in the next future (for releases 2.1, 2.2 …).

There are still many things that make Divi sites look too alike, and there is also a lot of room left for improvements to allow you customize Divi in seconds.

If you liked what you´ve seen on this post, you can get a more detailed information about all the Divi Children features on the Divi Children 2.0 release post.

You can download this free plugin from the Divi Children plugin page.

Luis Alejandre

Luis is the creator of the WPThemeDetector tool and the chief editor of this blog. You can read more about Luis in our About page.
Liked this post? Please share it!

42 Comments

  1. Looking great.Thanks for telling me the features of this great plugin.I will use this for my own purpose.

  2. Hi Luis, sounds awesome. Can’t wait to check it out on my installations.

  3. This is my favorite WordPress theme to date. I use it on my website and my visitors have been loving the design. It’s in my list of top WordPress themes.

  4. Hello, a great article about Divi, congratulations, by the way as it is called the capture tool animated image?, greetings

    • Thank you, Pep.

      I made those GIF animated images with LICEcap by Cockos, which is GPL free software. It´s nice and very easy to use. You can download it here from the Cockos site.

      Fácil 😉

      • Luis thank you very much, greetings from Barcelona

  5. Using children theme is always good, but in this children theme there is lots of features not available

    • Hi David,

      The code you mention is not intended to be added to header.php, but to functions.php, which you´ll have in your child theme created by Divi Children.

      If you ever have to do something in header.php, just copy that file from the Divi theme folder, paste in your child theme folder (with the same name), and edit it as you need.

      • Sorry for my ignorance but how do you access the functions.php in the WordPress admin? Is it via Appearance>editor>templates>theme functions>function.php (with the Divi child theme selected)? And is it simply added to the bottom? Thanks!

        • Yes, David, you can edit the functions.php file like that from the WP admin area. Just add your new code to the bottom.

          • I tried that and it broke my site. Came up with a Parse error that made it inaccessible and had to have my web host fix it. Luckily I just tossed the child theme and made another. What went wrong?

          • I can´t tell you now, I haven´t checked that code you referred.

  6. I tried to contact the writer of the code but he hasn’t responded. Here it is:

    // load jQuery
    wp_enqueue_script('jquery');

    // hook the widget area into the footer, then move into place in the header
    function myprefix_add_header_img() { ?>

    jQuery("#myprefix-page-start-img").prependTo(jQuery("body"));

    /* Change header to float correctly wherever it is in the page */
    @media only screen and ( min-width:981px ) {
    #main-header { position:relative !important; top:0px !important; }
    #main-header.et-fixed-header { position:fixed !important; margin-bottom:0px; top:0px !important; }
    body.admin-bar #main-header.et-fixed-header { top:32px !important; }
    #page-container { overflow:hidden; }
    }

    /* Style the image for full screen layouts */
    @media only screen and ( min-width:981px ) {
    #myprefix-page-start-img { margin-bottom:-80px; width:100%;}
    }

    /* Style the image for box layout */
    @media only screen and (min-width: 1200px) {
    .et_boxed_layout #myprefix-page-start-img {
    width:1200px;
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    display:block !important;
    margin-left:auto;
    margin-right:auto;
    }
    }

    /* Hide the image on smaller screens */
    @media only screen and ( max-width:980px ) {
    #myprefix-page-start-img { display:none; }
    }

    <?php
    }
    add_action('wp_head', 'myprefix_css');

    • Sorry David, I just don´t have the time to check that code, but the first line doesn´t look too right to me.

  7. Hi Luis. Great work, though have one issue.

    When i now go to Appearance>DiviThemOptions, the ePanl loads then when it stops loading, all the ePanel options dissappear.

    Your assistance would be greatly appreciated.

    Cheers Emin

    • Hi Emin,

      Never heard of such an issue. Have you tried to deactivate your plugins one by one to see if there is any incompatibility?

      Also: please deactivate the Divi Children plugin and see if the issue still exists. Once you´ve created your child theme you won´t need the plugin except for updating it or to create a new one.

  8. once I deactivate it no problem – any thoughts?

    • There might be some js incompatibility with other plugin. But like I said, once you´ve created your child theme, you can work with it even if the Divi Children plugin is deactivated.

      Your child theme created by Divi children doesn´t need the plugin to work, all the customizing features are included in the child theme.

  9. Great work i will surely try it 🙂

  10. Wow! Looking forward to using this Luis, thank you.

  11. Thanks for a great plugin. I can see split testing a design much easier using Child Themes. Although Divi is not my “end all” go to theme it has some great custom options for full width looking designs. The ease in adding parallax background images and creating custom css within modules makes Divi a great choice though I must say. Without that feature would make customising native css even more of a nightmare.

  12. Dear Luis Alejandre,
    I have downloaded and activate the plugin in my divi 2.1.4 version. It does not work.
    when I try to activate it it gives me this error message at the top of the page:

    ” Warning: file(/Users/myname/Siti/mywebsite.com/wp-content/themes/Divi/footer.php) [function.file]: failed to open stream: No such file or directory in /Users/myname/Siti/mywebsite.com/wp-content/plugins/divi-children-2/divi-children.php on line 426

    Warning: Invalid argument supplied for foreach() in /Users/myname/Siti/mywebsite.com/wp-content/plugins/divi-children-2/divi-children.php on line 427 ”

    Thank you in advance for the help!
    Francesca

  13. Hi Luis,

    Great post, thank you! I wanted to get your thoughts at applying a patch to the Divi theme that allows full-page text boxes. Here is the patch I downloaded: https://gist.github.com/Ramblurr/02690c7eff364db1dd41/download#

    After reading up on how to apply them, I have no idea what my best route would be as I am still a newbie trying to do this. Any advice would be greatly appreciated!

    Laura

  14. I’ve uploaded Divi Children only to find that page speed reduces from and A in the parent theme to an E in the child theme. Tested in Gmetrix. Do you have a solution to this problem?

  15. Will the release of the new version of Divi (2.4 I seem to recall) affect the way your plugin works?

    • Hi, Martin.

      I don´t think it will affect the way the plugin works, but some of the customizing features might be included in Divi out of the box.

  16. Eu gostaria de parabenizar o Trabalho de vocês.
    Sempre uso o Wp Detector.
    É show de bola.

  17. Hey Luis,

    Thanks for this plug-in, it really helped me out a bunch and saved me a slew of time. Much appreciated!

  18. Hi Luis

    I have created some custom classes by mistake. How do I delete them?

    Thanks
    David

  19. I have a customized DIVI theme that I would like to convert to a child theme so I can update my wordpress and Divi theme without losing my customizations. Is the possible with your plugin?

    I am also looking for a reference to a developer who can help me going forward on other integrations (sendy, woo commerce etc) any reference would be great.

  20. how i can add a comments box on home page for each post ! i try
    but it don’t work who can help me

  21. hi! can you tell me if this is compatible with the new divi release? tia! xo

  22. I just sent the following to the contact form on your site. Sorry for the duplication, just wasn’t which is the best way to reach you.

    I’m getting the following error when I try to look at my post or page list:
    Fatal error: Class ‘ET_Builder_Module_Blog’ not found in /home/masterofaction1/public_html/wp-content/themes/master-of-action-divi-child-theme/my-main-modules.php on line 3

    • Hi, John. I guess you´re using the wrong combination of Divi and Divi Children created child theme versions. Please check it out at Divi4u.

  23. I’m using Divi Children 2.0.8 and Divi Theme 2.5.3. I believe these are both up-to-date. Any other ideas?

    • What is this ‘my-main-modules.php’ file where the error is found? It was not created by Divi Children.

  24. Great Plugin!! Can I add code to the header via this child theme?

    Charlotte

Trackbacks/Pingbacks

  1. The DIVI Children pluging | Y. Land Pro - […] Pour plus d’information […]

Submit a Comment

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