Setting up Child Theme and Presets

In this video, I’ll go over a few steps which I think should be done at the very beginning when starting a new website build, right after you install WordPress and the Divi Theme.

Video Chapters

functions.php

// Allow SVG Uploads

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


function dsa_check_svgimg_types($dsa_svg_filetype_ext_data, $file, $filename, $mimes) {
	if ( substr($filename, -4) === '.svg' ) {
		$dsa_svg_filetype_ext_data['ext'] = 'svg';
		$dsa_svg_filetype_ext_data['type'] = 'image/svg+xml';
	}
	return $dsa_svg_filetype_ext_data;
}
add_filter( 'wp_check_filetype_and_ext', 'dsa_check_svgimg_types', 100, 4 );
 

style.css

/* Global Colors */

:root {
	--gray1: #1F2933;
	--gray2: #323F4B;
	--gray3: #3E4C59;
	--gray4: #52606D;
	--gray5: #616E7C;
	--gray6: #7B8794;
	--gray7: #9AA5B1;
	--gray8: #CBD2D9;
	--gray9: #E4E7EB;
	--gray10: #F5F7FA;
}

/* Text Module */

.maya-text h1,
.maya-text h2,
.maya-text h3,
.maya-text h4,
.maya-text h5,
.maya-text h6 {
    padding-bottom: .75em;
}

.maya-text h1:not(:first-child),
.maya-text h2:not(:first-child),
.maya-text h3:not(:first-child),
.maya-text h4:not(:first-child),
.maya-text h5:not(:first-child),
.maya-text h6:not(:first-child) {
    padding-top:1.25em;
}

.maya-text ul li,
.maya-text ol li {
    padding-bottom: .5em;
}

.maya-text p:last-of-type {
    padding-bottom: 1em;
}
.maya-text p:last-child {
    padding-bottom: 0;
}
.maya-text blockquote p:last-of-type {
	padding-bottom:0;
}

.maya-text blockquote {
    background: var(--gray10);
    padding: 25px 35px;
}
.maya-text blockquote {
    position:relative;
}

.maya-text blockquote:before {
    content: '“';
    position: absolute;
    font-size: 5em;
    top: .15em;
    left: 0;
    color:var(--gray9);
}
.maya-text blockquote:after {
    content: '”';
    position: absolute;
    font-size: 5em;
    bottom: -0.45em;
    right: 0.25em;
    color:var(--gray9);
}


/* Buttons */
.maya-btn.et_pb_button {
    line-height: 1!important;
}