Divi header customization

The code snippet below demonstrates how to customize the Divi header in WordPress using the Divi theme’s built-in hooks and filters.

function wpsnippets_custom_divi_header() {
    // Add custom content to the Divi header
    echo '<div class="custom-header-content">Custom Header Content</div>';
}
add_action( 'et_before_main_content', 'wpsnippets_custom_divi_header' );

This code snippet adds a custom function wpsnippets_custom_divi_header that echoes out a custom header content. The function is then hooked into the et_before_main_content action using the add_action function. This ensures that the custom header content is displayed before the main content of the Divi theme.

You can modify the content within the echo statement to display any custom HTML, CSS, or JavaScript code you want to include in the Divi header. This allows you to add custom logos, navigation menus, social media icons, or any other elements you desire.

By using the Divi theme’s hooks and filters, you can easily customize the Divi header without modifying the theme files directly. This ensures that your customizations are not lost during theme updates.

This code snippet can be useful when you want to add custom content or functionality to the Divi header, such as displaying a promotional banner, adding a search bar, or integrating third-party scripts.

Examples

Example 1: Adding a custom logo to the Divi header

This use case demonstrates how to add a custom logo to the Divi header using a child theme.

function wpsnippets_custom_logo() {
    echo '<div class="custom-logo">';
    echo '<a href="' . esc_url( home_url( '/' ) ) . '" rel="home">';
    echo '<img src="' . esc_url( get_stylesheet_directory_uri() ) . '/images/logo.png" alt="Custom Logo">';
    echo '</a>';
    echo '</div>';
}
add_action( 'et_before_main_content', 'wpsnippets_custom_logo' );

Explanation: The wpsnippets_custom_logo function is hooked to the et_before_main_content action, which allows us to add our custom logo markup to the header. The function echoes the HTML markup for the logo, including the image source and alt text. The get_stylesheet_directory_uri() function retrieves the URL of the child theme directory, where we assume the logo image is stored.

Example 2: Changing the background color of the Divi header

This use case demonstrates how to change the background color of the Divi header using custom CSS.

function wpsnippets_custom_header_css() {
    echo '<style>';
    echo '.et_header_style_centered .et-fixed-header {';
    echo 'background-color: #f5f5f5;';
    echo '}';
    echo '</style>';
}
add_action( 'wp_head', 'wpsnippets_custom_header_css' );

Explanation: The wpsnippets_custom_header_css function is hooked to the wp_head action, which allows us to add custom CSS to the head section of the website. The function echoes the CSS code to target the Divi header with the class .et-fixed-header and change its background color to #f5f5f5. You can modify the color value to suit your needs.

Example 3: Adding a custom menu to the Divi header

This use case demonstrates how to add a custom menu to the Divi header using a child theme.

function wpsnippets_custom_header_menu() {
    wp_nav_menu( array(
        'theme_location' => 'custom-header-menu',
        'container' => 'nav',
        'container_class' => 'custom-header-menu',
    ) );
}
add_action( 'et_header_top', 'wpsnippets_custom_header_menu' );

Explanation: The wpsnippets_custom_header_menu function is hooked to the et_header_top action, which allows us to add our custom menu to the header. The function uses the wp_nav_menu function to display a menu assigned to the custom-header-menu theme location. The container parameter specifies the HTML element to wrap the menu in, and the container_class parameter adds a custom CSS class to the container element for styling purposes.