Index of Handy Divi Snippets
ACF relationship field with WP Forms
Description and placement:
This code will use ACF's relationship field to display a WP Forms. Place this code snippet in your single template file located in your child theme directory.PHP
ACF’s gallery with Divi native gallery module
Description and placement:
This code will use ACF's galley field with Divi's native gallery module. Place this code snippet in your single template file located in your child theme directory.PHP
Add a hover effect to Divi’s navigation bar
Description and placement:
This code will add a hover effect to Divi's navigation bar. Place this code snippet in your style.css file in your child theme directory.CSS
Change default “Select Page” in Divi mobile menu
Description and placement:
This code will give you the ability to change Divi's default "Select Page" to whatever you want. Place this code inside your functions.php file in your child theme directory.PHP
Control opacity on Divi’s navigation bar
Description and placement:
This code will target the opacity on Divi's navigation bar links. Place this code inside your style.css file in your child theme directory.CSS
Custom post type archive template for Divi
Description and placement:
This template can be used as an archive page for a custom post type in Divi. Create a file and name archive-your_custom_post_name.php. and place it in your child theme directory.PHP
Custom short code for archive loop
Description and placement:
This code will make a shortcode that you can place in any template file or page to render a custom post type archive. Place the first block of code in your child theme directory inside the functions.php file. The 2nd block of code can be placed inside any template file or page (see comments).PHP
PHP
Enable SVG upload in WordPress
Description and placement:
This code will enable SVG upload in WordPress. Place this code in functions.php in your child theme directory.PHP
Enqueue child theme
Description and placement:
This code will load the child theme style.css file. Place this code in the functions.php file in your child theme directory.PHP
Enqueue other styles and scripts
Description and placement:
This code will load other style.css files and js scripts. Place this code in the functions.php file in your child theme directory.PHP
Fullwidth Divi mobile menu
Description and placement:
This code will force Divi's mobile menu to expand fullwidth. Place this code in your style.css file in your child theme directory.CSS
Hide WordPress editor based on a custom template
Description and placement:
This code will hide the WordPress editor bases on a custom template. Good if you're using your own fields. You can add this code snippet to your functions.php file in your child theme directory.PHP
Nest sub menu items on Divi’s mobile menu
Description and placement:
These codes will nest sub menu items in Divi's mobile menu. Place this code in style.css in your child theme directory.CSS
JS
New breakpoint for mobile menu
Description and placement:
This code will change the break point to reveal Divi's mobile menu. Place this code in style.css file in your child theme directory.CSS
Remove “Projects” custom post type from Divi
Description and placement:
This code will remove Divi's "Projects" custom post type. Place this code in functions.php file in your child theme directory.PHP
Replace list bullets with Divi icons
Description and placement:
This code will replace list bullets with Divi icons. Place this code in style.css in your child theme directory.CSS
Social media icon classes for Divi’s secondary nav
Description and placement:
These Divi classes will give you more social media icon option in footer and secondary navigation.CSS
Turn Divi mobile menu icon to “X” when clicked
Description and placement:
Turn Divi mobile menu icon to "X" when clicked. Place this code in style.css file in your child theme directory.CSS