Creating a child theme is a must when want to edit the look and feel of ones main WordPress theme. Child themes allow us to make changes without affecting the original theme. This is virtually the only way where we can update our main theme without losing our customizations. By creating a child theme, we end up with a separate set of files neatly contained in their own folder that we customize, thereby adjusting the look and feel of our website without affecting the original theme at all. Trust me, this is the best way to make sure that you will never wreck your website as you are never actually modifying the original theme files.

 

l

Lets Go!

In this example, I will be creating a child theme for the Divi theme. First things first, I create a ndw folder to contain the files needed. Once completed, all I need to do is move this one folder into the WordPress theme folder located at:
/wp-content/themes/

You can name this folder anything you like. I strongly reccomend something sensible. divi-child comes to mind 🙂 Within this new folder, we create a file called style.css and fill in the information as detailed below. FYI – All this info is available in the WordPress Codex on Child Themes.

Add in order:

 Theme Name
 Theme URI
 Description
 Author
 Author URI
 Template
 Version
 License
 License URI
 Tags
 Text Domain

Note: You can leave out a few items to keep things simple. The following is what 99% of my child themes contain.

/*
Theme Name: 	Divi Child
Theme URI:	http://hqsecure.com
Description:	WordPress child theme custom developed for my esteemed client. Based upon the premium Elegant Themes Divi theme.
Author:		Flash Buddy
Author URI:	http://flashalexander.com
Template: 	Divi
Version: 	4.1	
Tags:		Premium, WordPress, Custom, Responsive, sidebars, columns, shortcodes, widget ready, valid XHTML
*/

@import url(../Divi/style.css);

/* === CUSTOM STYLES BEGIN =================== */

You will need to replace the example text above with the details relevant to your theme.
The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Divi theme, so the Template will be Divi. You may be working with a different theme, so adjust accordingly.

The only required child theme file is style.css, though having screenshot.png (or .jpg) is a nice touch. You can find my Photoshop template in the download file available at the end of this post. Additional files will be added as we SUPERCHARGE our new theme.

View Video of the Process

Supercharge!

From many years of experience working with WordPress I’ve run into two particular content formatting issues that dive me nuts. One is where repeating rows of content each have an image, the overall appearance becomes a jumbled mess.

Functions

We are going to create a new file named functions.php and add some code into it that will help solve this problem. WordPress is so smart and clever; it will automatically find our file and know exactly what we are intending.

With this new file in place, our jumbled mess of blog posts will be copesthetic.

Add This Code

What I have created is a shortcode. I’m not going to delve into that in this post. All we need for now is the code for our newly created functions.php file. Here it comes!

<?php

//ShortCode Clear All Function from Flash Buddy :: https://hqsecure.com
function breakall() {
return '<br clear="all" />';
}
add_shortcode('clear', 'breakall');

?>

 

Where ever we want to add a hard break between website content elements we add this short code:

[ clear ] (without the spaces – I added spaces to deactivate it so you can see it)

 

 

Spaceme!

Don’t you hate it when a title or other element sits to close to the element above it? Use my spaceme shortcode to create additional spacing.

First add this code to your functions.php file in your child theme folder:

/ Spacer - User Adjustable.
// Usage: Use shortcode 
where xx is a number denoting the height one wants in pixels. Default is 5px. function spacey($atts) { extract(shortcode_atts(array( "height" => '5', ), $atts)); return '<div style="height: '. $height.'px; width: 100%; display: block;"></div>'; } add_shortcode('spaceme', 'spacey');

 

Get This Supercharged WordPress Child Theme Now

Download
Email Circular

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.

Tip Jar

Send a Gratuity

Your generosity is greatly appreciated 🙂


Credit Cards


Loading...

Give a Shout Out

8 + 11 =

Pin It on Pinterest

Signup For Access To Free WordPress Tips & Resources

Signup For Access To Free WordPress Tips & Resources

Signup for our very occasional newsletter and get access to free downloads, as well as WordPress tips, tricks and resources.

You have Successfully Subscribed!