DiviChild – My Go-To Divi Child Theme

November 13, 2018

Get Divi Now

Get the Divi theme for WordPress - the smartest, most flexible theme in the collection. With Divi, the sky’s the limit.

WordPress Divi Theme Ad Graphic - divi_728x90

I start every Divi website project by installing a child theme. Of course it is my own flavor, aptly named DiviChild. Surprising to the non-coders out there, WordPress child themes don’t have much going on. They draw their power from the parent theme of which they are a child of. The same goes for Divi. My DiviChild theme is simple and straight forward. It is designed to give me (or any developer) a clean slate from which to start developing a new WordPress website on.

Included Shortcodes

I’ve added a few (very few) bells and whistles. Found in the child theme functions.php file, they incorporate a couple tools that I find myself using over and over. For example, I sometimes find it necessary to add a little padding or margin between elements in a text module, blurb module, or other module that accepts text content. Instead of relying on writing out the css, I simply drop in my child theme’s pre-canned shortcode to accelerate the process.

Examples

Spaceme Shortcode
Use [ spaceme height=”12″ ] to create user defined margin between elements. The default is 12px. You can change the height to any number that works for you.

HTML Output :: <div style=”margin-top: 12px; width: 100%; display: block;”>some content </div>

I can throw that in anywhere in the content as needed 🙂

Clear All Shortcode
Use [ br ] to create a hard break between items.

Shortcode Fixes
I observed how the original Elegant Themes shortcodes are still packaged in the Divi theme, but for the cute icon buttons, the css has the wrong url! My DiviChild theme has corrections for this built in.

Bonus Features
Seldom used dashboard widgets that clutter up your experience have been removed. These include:

  • Incoming Links
  • Quick Press
  • Recent Drafts
  • Right Now
  • Activity

Divi Child Theme

Custom Button Shortcode Included

On many occasions I find myself needing a custom button that may be inserted in multiple locations throughout the website content. So much easier and faster to use a shortcode.

Example

Default Button Usage: Use shortcode [ btn link=http://yourwebaddresshere.com ]Button Label[ /btn ]

The following button is the default. Edit the child theme style.css file to customize the visual appearance.

Button Label

Available options:
Link Target: use _self, _top, or any valid html target. ie. target=”_blank”
Border Color: Use hex code or any named color. ie. border=”red”
Background Color: Use hex code or any named color. ie. background=”black”
Label Color: Use hex code or any named color. ie. color=”white”
Title: Any text – This is the hover tool tip. ie. link=”Google”

Shortcode using all options:
[ btn color=”white” background=”black” link=”https://google.com” target=”_blank” border=”#555″ ]Visit Google[ /btn ]

Visit Google

Get Divi Now

Get the Divi theme for WordPress - the smartest, most flexible theme in the collection. With Divi, the sky’s the limit.

WordPress Divi Theme Ad Graphic - divi_728x90

DiviChild

Flash Buddy’s child theme for Divi.

Tip Jar

Send a Gratuity

Your generosity is greatly appreciated 🙂


Credit Cards


Loading...

Give a Shout Out

15 + 6 =

mailbox email subscribe

Subscribe for Divi Freebies

Plugin update notifications :: stay abreast of new and or updated items by opting in to my very occasional email newsletter. I swear by all that is right and holy your email address will never be shared, sold, traded or otherwise abused and I seriously doubt you'll see anything more than plugin/code update notifications when they are of the utmost importance.

Pin It on Pinterest