Functions to Improve Divi WordPress Theme

Here are some functions to super charge and improve the Divi WordPress theme. You can add Font Awesome, speed up your site, remove the Projects Custom Post Type and if you’re using Gravity Forms, track form submissions as Google Analytics Events.

Just drop these code snippets into your Child Theme function.php file on your staging or dev site to test them out.

Properly Enqueue the Child Theme Stylesheet

The stylesheet call on it’s own is no longer the right way to get your child theme css working in your theme.

// properly enqueue child theme stylesheet
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

 

Remove the Projects Custom Post Type from the Divi Theme

Clean up your WordPress admin dashboard menu by removing the Projects custom post type from Divi.

//* Remove the Projects Custom Post Type from the Divi Theme */
if ( ! function_exists( 'et_pb_register_posttypes' ) ) :
function et_pb_register_posttypes() {
	global $wp_post_types;
		if ( isset( $wp_post_types[ $post_type ] ) ) {
			unset( $wp_post_types[ $post_type ] );
			return true;
		}
	return false;
}
endif;

 

Allow Scaleable Vector Graphic (SVG) files in the WordPress Media Library

This will let you upload an SVG as your logo or really anywhere you want to use the WordPress media library. Just be careful here. If you also allow graphic uploads on your website by end users you’ll be opening a security hole where code could be injected into your database. Now WordPress supports SVG’s out of the box, so no need to add this. 

// Allow SVG uploads

function allow_svgimg_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'allow_svgimg_types');

 

Add FontAwesome to Divi

Because Divi’s Icon library is not always enough.

// Add FontAwesome 4.7.0
add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
 
    wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
 
}

 

Pull out the Divi default Google fonts

You can help speed up your Divi theme by adding this snippet to your child theme functions.php file. Test it before and after with a WordPress speed test.

// Pull out the divi default google fonts

function wpse_dequeue_google_fonts() {
    wp_dequeue_style( 'divi-fonts' );
}
add_action( 'wp_enqueue_scripts', 'wpse_dequeue_google_fonts', 20 );

 

Track Gravity Forms Submissions as Google Analytics Events

/** 
	*Track gravity forms conversions as events in GA - remember to adjust gform_submit_button_# */

function add_conversion_tracking_code($button, $form) {
	$dom = new DOMDocument();
	$dom->loadHTML($button);
	$input = $dom->getElementsByTagName('input')->item(0);
	if ($input->hasAttribute('onclick')) {
		$input->setAttribute("onclick","ga('send', 'event', { eventCategory: 'Forms', eventAction: 'Submit', eventLabel: 'Email'});".$input->getAttribute("onclick"));
	} else {
		$input->setAttribute("onclick","ga('send', 'event', { eventCategory: 'Forms', eventAction: 'Submit', eventLabel: 'Email'});");
	}
	return $dom->saveHtml();
}
add_filter( 'gform_submit_button_2', 'add_conversion_tracking_code', 10, 2);  // adjust for the form id

Remove the Gutenberg Block Library for a speed increase

This will load one less style sheet: <link rel=’stylesheet’ id=’wp-block-library-css’ href=’https://nextseasontv.com/wp-includes/css/dist/block-library/style.min.css’ type=’text/css’ media=’all’ />

/* Disable the Gutenberg Block Library to speed up the site */ function wpassist_remove_block_library_css(){ wp_dequeue_style( 'wp-block-library' ); } add_action( 'wp_enqueue_scripts', 'wpassist_remove_block_library_css' );

Not a function but handy to adjust the mobile menu break point in Divi with some custom CSS

/*adjust Divi Menu module breakpoint*/
@media only screen and (max-width: 1160px) {
#top-menu-nav {
display: none;
}
#et_mobile_nav_menu {
display: block
}
}