Divi theme customization

The Divi theme is a popular WordPress theme that allows for extensive customization. Here’s a code snippet that demonstrates how to customize the Divi theme using a child theme:

function wpsnippets_enqueue_styles() {
    // Enqueue parent theme stylesheet
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    // Enqueue child theme stylesheet
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_styles' );

This code snippet creates a child theme for Divi and enqueues the parent theme stylesheet as well as the child theme stylesheet. By using a child theme, you can make customizations to the Divi theme without modifying the parent theme files directly.

To use this code snippet, create a new directory in the wp-content/themes/ directory and name it something like divi-child. Inside the divi-child directory, create a style.css file and add the following code:

/*
Theme Name: Divi Child
Template: Divi
*/

Replace Divi Child with the desired name for your child theme. The Template value should be set to Divi to indicate that this is a child theme of the Divi theme.

Save the style.css file and activate the child theme in the WordPress admin panel. The parent theme stylesheet will be enqueued automatically, and the child theme stylesheet will be enqueued as well, inheriting styles from the parent theme.

This code snippet is useful when you want to customize the Divi theme without modifying the parent theme files directly. It allows you to maintain the original Divi theme files while making customizations in a separate child theme.

Examples

Example 1: Customizing the Divi theme header

This example demonstrates how to customize the header of the Divi theme by adding a custom logo and changing the navigation menu style.

function wpsnippets_custom_header() {
    // Add custom logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );

    // Change navigation menu style
    add_action( 'wp_enqueue_scripts', 'wpsnippets_custom_header_styles' );
    function wpsnippets_custom_header_styles() {
        wp_enqueue_style( 'custom-header-styles', get_stylesheet_directory_uri() . '/custom-header.css' );
    }
}
add_action( 'after_setup_theme', 'wpsnippets_custom_header' );

This code adds support for a custom logo in the Divi theme header, with a specified height and width. It also enqueues a custom CSS file to change the navigation menu style. The wpsnippets_custom_header_styles function is hooked to the wp_enqueue_scripts action to load the custom CSS file.

Example 2: Adding a custom footer widget area

This example demonstrates how to add a custom widget area to the footer of the Divi theme.

function wpsnippets_custom_footer_widget_area() {
    register_sidebar( array(
        'name'          => __( 'Custom Footer Widget Area', 'divi-child' ),
        'id'            => 'custom-footer-widget-area',
        'description'   => __( 'Add widgets here to appear in the footer.', 'divi-child' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h4 class="widget-title">',
        'after_title'   => '</h4>',
    ) );
}
add_action( 'widgets_init', 'wpsnippets_custom_footer_widget_area' );

This code registers a custom widget area for the footer of the Divi theme. The widget area is given a unique ID and a description. The before_widget, after_widget, before_title, and after_title parameters define the HTML markup for the widget container and title.

Example 3: Customizing the Divi theme blog layout

This example demonstrates how to customize the blog layout of the Divi theme by modifying the main query.

function wpsnippets_custom_blog_layout( $query ) {
    if ( $query->is_main_query() && $query->is_home() ) {
        $query->set( 'posts_per_page', 6 );
        $query->set( 'orderby', 'date' );
        $query->set( 'order', 'DESC' );
    }
}
add_action( 'pre_get_posts', 'wpsnippets_custom_blog_layout' );

This code modifies the main query for the blog page in the Divi theme. It sets the number of posts per page to 6 and orders them by date in descending order. The pre_get_posts action is used to modify the query before it is executed.