Divi footer customization

The Divi theme is a popular WordPress theme that allows for easy customization, including the footer section. By default, Divi provides a range of options to customize the footer, but sometimes you may need to go beyond those options and add your own customizations. In this case, you can use the following code snippet to customize the Divi footer:

function wpsnippets_custom_divi_footer() {
    // Add your custom footer content here
    echo '<div class="custom-footer">This is my custom footer content</div>';
}
add_action( 'wp_footer', 'wpsnippets_custom_divi_footer' );

This code snippet creates a custom function named wpsnippets_custom_divi_footer that echoes out your desired custom footer content. The function is then hooked into the wp_footer action using the add_action function. This ensures that your custom footer content is displayed in the footer section of your Divi theme.

You can modify the HTML content within the echo statement to suit your needs. For example, you can add additional HTML elements, CSS classes, or even dynamic content using PHP.

Remember to place this code snippet in your theme’s functions.php file or in a custom plugin file. After adding the code, you should see your custom footer content displayed in the footer section of your Divi theme.

This code snippet is useful when you want to add custom content to the Divi footer that is not available through the theme’s built-in customization options. It allows you to have full control over the appearance and functionality of your footer section.

Examples

Example 1: Adding a custom copyright text to the Divi footer

This use case demonstrates how to add a custom copyright text to the Divi footer using a child theme’s functions.php file.

function wpsnippets_custom_footer_copyright() {
    echo '<p>&copy; ' . date( 'Y' ) . ' Your Website. All rights reserved.</p>';
}
add_action( 'wp_footer', 'wpsnippets_custom_footer_copyright' );

The code example above adds a custom copyright text to the Divi footer by hooking into the wp_footer action. The wpsnippets_custom_footer_copyright function echoes the desired copyright text, including the current year obtained using the date function.

Example 2: Changing the background color of the Divi footer

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

#footer-bottom {
    background-color: #f5f5f5;
}

The code example above targets the #footer-bottom element, which represents the Divi footer, and sets its background color to #f5f5f5. This can be added to the theme’s custom CSS field or a child theme’s stylesheet.

Example 3: Adding social media icons to the Divi footer

This use case demonstrates how to add social media icons to the Divi footer using a custom function and Font Awesome icons.

function wpsnippets_add_social_icons_to_footer() {
    echo '<ul class="social-icons">
        <li><a href="https://facebook.com"><i class="fab fa-facebook"></i></a></li>
        <li><a href="https://twitter.com"><i class="fab fa-twitter"></i></a></li>
        <li><a href="https://instagram.com"><i class="fab fa-instagram"></i></a></li>
    </ul>';
}
add_action( 'wp_footer', 'wpsnippets_add_social_icons_to_footer' );

The code example above adds social media icons to the Divi footer by hooking into the wp_footer action. The wpsnippets_add_social_icons_to_footer function echoes an unordered list (ul) with list items (li) containing anchor (a) tags with Font Awesome icons (i) for Facebook, Twitter, and Instagram. The links can be customized to point to the desired social media profiles.