Skip to main content
How to Move the Blog Module to a Child Theme

Customize the Blog module by moving it from the Parent theme to a Child Theme.

Updated over 4 months ago

The following guide will teach you how to copy the Blog Module from the parent theme's folder to a Child Theme. This is useful if you need to customize the Divi Blog module.

Copying it to a Child Theme ensures that the changes will not get lost if the Divi parent theme is updated.

Prerequisites

  1. Use any File Manager (hosting File Manager app or a WordPress plugin such as Advanced File Manager) inside the Child Theme folder. Create a new folder and name it includes

  2. Copy the Blog.php file located in the Divi/includes/builder/module folder to the child theme folder/includes folder.

  3. Open the Blog.php file from your Child Theme and replace the following lines of code:

    1. The code on line 3:

      require_once 'helpers/Overlay.php';


      With:

      get_template_part( '/includes/builder/module/helpers/Overlay.php' );

    2. The code on line 5:

      class ET_Builder_Module_Blog extends ET_Builder_Module_Type_PostBased {

      With:

      class custom_ET_Builder_Module_Blog extends ET_Builder_Module_Type_PostBased {

    3. The code on line 17:

      $this->vb_support       = 'on';

      With:

      $this->vb_support       = 'off';

  4. Scroll down at the end of the Blog.php file and remove this PHP code:

    if ( et_builder_should_load_all_module_data() ) {
    new ET_Builder_Module_Blog();
    }

  5. Save the changes

  6. Open the functions.php file inside the Child Theme's folder and add this PHP code:

    /*================================================
    #Load custom Blog Module
    ================================================*/
    function divi_custom_blog_module() {
    get_template_part( '/includes/Blog' );
    $dcfm = new custom_ET_Builder_Module_Blog();
    remove_shortcode( 'et_pb_blog' );
    add_shortcode( 'et_pb_blog', array( $dcfm, '_shortcode_callback' ) );
    }
    add_action( 'et_builder_ready', 'divi_custom_blog_module' );
    function divi_custom_blog_class( $classlist ) {
    // Blog Module 'classname' overwrite.
    $classlist['et_pb_blog'] = array( 'classname' => 'custom_ET_Builder_Module_Blog',);
    return $classlist;
    }
    add_filter( 'et_module_classes', 'divi_custom_blog_class' );

  7. Save the functions.php file.

You have successfully copied the Blog module from the Parent Theme to your Child Theme, and you can start customizing its PHP code to add your personalized customization.

Notes:

  • After the moving process is completed, the Visual Builder will assume that the Blog module is now a 3rd party module. That means while the Visual Builder is active, you will only see a grey box:

  • Even if the Blog module is not rendered anymore inside the Visual Builder, all its settings will still work as expected

  • The Blog module will be rendered without any issues on the front end.

  • If you would prefer to avoid manual customization, you can browse your Marketplace and check all the third-party plugins available that can be used to customize the Blog Module.

Did this answer your question?