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.

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.

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!

//ShortCode Clear All Function from Flash Buddy :: https://hqsecure.com
function breakall() {
return '
';
}
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 '
';
}
add_shortcode('spaceme', 'spacey');