Handy Divi Snippets Overview (part 1)

by | Sep 10, 2017 | Tips & Tricks

Handy Divi Snippets Overview

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

PHP:

add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
 wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}

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

CSS:

.et-social-facebook 
.et-social-twitter
.et-social-google-plus
.et-social-pinterest
.et-social-linkedin
.et-social-tumblr
.et-social-instagram
.et-social-skype
.et-social-flikr
.et-social-myspace
.et-social-dribbble
.et-social-youtube
.et-social-vimeo
.et-social-rss

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.

PHP:

<li class="et-social-icon et-social-youtube">
 <a href="https://www.youtube.com/" target="_blank" class="icon">
 <span><?php esc_html_e( 'YouTube', 'Divi' ); ?></span>
 </a>
</li>

Mobile Menu Open “x” Icon

CSS:

.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d";
}

This snippet will make this mobile menu icon turn into an icon when clicked on.

Custom Bullets for CSS Lists

CSS:

.custom_bullets ul {
 padding-bottom: 20px;
}
.custom_bullets li {
 padding-left: 15px;
 padding-bottom: 0em;
 list-style-type: none;
}
.custom_bullets li::before {
 font-family: 'ETmodules';
 content: "\45";
 color: #0C71C3;
 position: absolute;
 left: 5px;
}

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

CSS:

.container.et_menu_container { 
 width: calc( 100% - 60px);
}
.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

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

CSS:

@media (max-width: 1024px) { 
 #et_mobile_nav_menu {
 display: block;
 } 
 #top-menu {
 display: none;
 }
 }

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

PHP:

function my_et_builder_post_types( $post_types ) {
 $post_types[] = 'custom_post_type 1';
 $post_types[] = 'custom_post_type 2'; 
 return $post_types;
}
add_filter( 'et_builder_post_types', 'my_et_builder_post_types' );

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)”.

Thank you for reading Handy Divi Snippets Overview. 😀

0 Comments