Hi guys. Today we are going to review our “Handy Divi Snippets” and discuss well, why they’re handy. Since I develop my websites exclusively with Divi, I find myself using the same code snippets over and over. So I decided to make a repository and share them with you fine people. So without further ado, let’s get started!
Enqueue Child Theme
A few years back, child themes had to import the CSS via the @import method. However, enqueuing the CSS through the function.php file is way more efficient. So go ahead and paste this code in your child theme’s functions.php file and remove the @import url(../parent-theme/style.css) from your child theme’s style sheet. If you don’t have a child theme installed, skip this step and download our free Divi child theme.
Social Media Icon Classes
If you require more then the default social media icons, you can use these classes. Create a new directory in your child theme —> /public_html/wp-content/themes/Divi-child/includes and make a copy of social_icons.php found here /public_html/wp-content/themes/Divi/includes and place it in the newly created directory. Open the file and add the code below right before this tag </ul> then simply replace the et-social-youtube with one of the available social media classes.
Mobile Menu Open “x” Icon
This snippet will make this mobile menu icon turn into an icon when clicked on.
Custom Bullets for CSS Lists
The default bullets in a un-ordered list is very unappealing. The snippet will give you the option to use Divi’s native icons. Check out the example below:
- List 1
- List 2
- List 3
- List 4
- List 5
To change the bullet icon simply change the unicode, which you can here.
Full Width Mobile Menu
Notice the mobile drop down menu does not expand edge to edge, this code snippet will make it full width.
New Break-point for Mobile Menu
This snippet will give you control over the width at which Divi hides the menu links and reveals the mobile icon (Divi’s default break point is 980px). You can find more information here.
Add Divi Builder to Custom Post Type
If you ever worked with custom post types, this code snippet is a life saver. Simply replace ‘custom_post_type 1’ with your new CTP name and presto. You can find more in our other blog “Setting Up Custom Post Types in Divi (Part 1)”.