A Basic Guide To WordPress Theme Customization

Themes are awesome! You don’t need to build and maintain thousands of lines of code, someone else has already done it for you. Themes make your website look great and provide unique features you need. Premium themes such as the ones we have on offer give you plenty of flexibility in layout, integrations and navigation.

That being said, all themes are templates. They try and be useful to as many people as possible but they can not cater to every little detail. This is where theme customization comes in. By using a child theme you can add little bits (or large chunks) of code to your theme without loosing the option to update.

In this article I’ll look at some common modifications you may want to accomplish and how you can do them. I’ll focus mostly on how to figure out what to do which is more important than the actual code used. I’ll be using Divi as an example but the methods here can be applied to any theme. Let’s jump in!

Creating A Child Theme

The first step should be creating a child theme. If you ever plan on doing any customization at all, you should always start by creating a child theme as soon as you get started.

Child themes are themes which rely on the presence of a parent theme. They borrow as much functionality from the parent theme as possible. Your job is to overwrite bits and pieces of functionality where needed.

To create a child theme create a new folder in your wp-content/themes directory. You can name it anything you’d like, I am naming mine divi-child. Create two files in this folder: style.css and functions.php. In the stylesheet, paste the code below:

/*
Theme Name: My Divi Child Theme
Theme URI: http://mydomain.com/
Version: 1.0
Description: A customized version of Divi which adds a number of tiny features I need.
Author: Your Name
Author URI: http://www.yourwebsite.com
Template: Divi
*/

The next step is to make sure that styles of the parent theme are used in the child theme. In the past it was commonplace to include this within the stylesheet. This is not the recommended method, you should enqueue the parent stylesheet in the functions file, here’s how:

<?php
add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' );
function my_enqueue_assets() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

If you visit the Appearance section in the admin you should see your new theme listed. You can now activate it and visit the front-end. The result should be exactly the same as the parent theme. At this stage everything is handled by the parent theme, all the files, all the views, all the styles come from there.

A Quick Primer On Child Themes

If you’ve never used a child theme before here’s a quick guide on how to use them. When you use a child theme all the functionality is inherited from the parent theme. This means that unless you specify otherwise in the child themes, all elements will be taken from the parent theme.

There are three methods you can use to modify the parent theme’s functionality:

• Overwrite a whole file
• Create additional styles
• Use hooks

Overwriting whole files is usually the method of choice if you want to make structural changes like moving the title below the featured image. Creating additional styles is the way to go if you need to make some simple CSS changes to make the theme do your bidding. This could include anything from modifying the sidebar position to re-coloring elements.

Hooks should be used wherever possible since these provide the most modular way to make changes. If you aren’t familiar with hooks don’t worry about this for now. Hooks can change functionality like excerpt lengths, image output and lots of other default WordPress functionality.

There is one exception to these rules, the functions file. The child’s functions file does not overwrite the parent’s. The child function file is loaded first, followed by the parent functions file.

Theme Customization Examples

Armed with the knowledge above, let’s make some modification to Divi. I will go to some lengths to make sure I explain the thought process that I used to figure out how to modify something. The actual code used is less important but I will of course sow that as well.

Sidebar Positioning

Divi allows you to change the location of the sidebar on any page – including WooCommerce pages – but there is no built in setting to modify the sidebar position on the default blog page. This is actually the first step in modifying functionality: make sure there’s no built-in way to do it.

Since I am aware of how error-prone I am I used another method to make sure this needs a child theme modification. I assumed that the theme would use a class applied to the sidebar container to modify the location. Using the Chrome developer tools I looked at the sidebar element (#sidebar). It does not have any positioning classes but I did find the solution in the developer tool sidebar which shows the CSS rules applied to this element:

The positioning rules for the sidebar in Chrome Developer Tools

The class et_right_sidebar is added to the body element. If you take a look on a page where the sidebar is positioned to the left you can see that the et_left_sidebar is used. This is perfect because it can be modified without the need to modify any template files.

The classes added to the body can be controlled via the body_class hook. You can see the theme adding its own classes in functions.php from lines 1313 – 1346 at the time of writing. The et_divi_sidebar_class() function is hooked into the body_class hook.

What we need to do to modify this behaviour is hook our own function into this hook. Open the functions file in your child theme, let’s create our hooked function.

add_filter( 'body_class', 'divi_child_body_classes', 20 );
function divi_child_body_classes() {

}

We want to add the class for the left-hand positioned sidebar if the theme is displaying the main blog page. This can be done with the is_home() function which returns true whenever the main blog index is shown.

Just in case, we’ll make sure that the possible right sidebar class is removed and then we’ll add our own. Here’s how:

add_filter( 'body_class', 'divi_child_body_classes', 20 );
function divi_child_body_classes( $classes ) {

    if( is_home() ) { 
        $key = array_search( 'et_right_sidebar', $classes );
        if( !empty( $key ) ) {
        	unset( $classes[$key] );
        }

        $classes[] = 'et_left_sidebar';
    }

    return $classes;
}

This function is great because it demonstrates the need for priorities in hooks. If you do not add 20 as the priority this function will not work. Remember how we discussed that the parent’s functions file is loaded after the child’s? If you do not add a priority your function will be performed first, followed by the parent’s which will lead to duplicate classes being added.

Replacing The Title And The Featured Image

Let’s look at an example where we’ll need to modify a file. A single post page in Divi shows the title, the metadata and the featured image one under the other. How about showing the featured image on top?

To accomplish this we’ll need to copy the single.php file from the parent theme into the child theme. From this point on the single.php file within the child theme will be responsible for the single post page, not the parent theme.

First, let’s find the elements we need. The title is displayed on line 11 using the the_title() function, the metadata is output using the et_divi_post_meta() function on line 16. The thumbnail needs a bit more code, the final line that displays it is on line 38.

The way I solved this problem is to cut line 11 and line 16 and paste it just before the div with the class of .entry-content. Here’s how it looks:

<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
<?php
    if ( ! post_password_required() ) :
    // Other code here
?>
<h1><?php the_title(); ?></h1>
<?php et_divi_post_meta() ?>

<div class="entry-content">

This is now fine structure-wise, all we need to do is add a little margin to the image to space it out a bit. I thought it would be prudent to use the same margin the theme uses. To figure this out I looked at the source code, specifically the bottom margin of the meta element.

The source code for the image, title and metadata

In the end I will take the margin off the meta element and I will add it to the title element:

.post > h1 {
    margin-top:6px;
}

.et_pb_post .post-meta {
    margin-bottom:0px;
}

In case you’re wondering why I used .post > h1 instead of .post h1 it has to do with inheritance. If we use the later version all level 1 headings within the post will have a top margin of 6px. To prevent h1 elements in post content inheriting these rules I make sure only h1 elements which are direct descendants of the main post element have the new margin.

The image on top with the title and metadata on the bottom

Changing Widget Title Styles

Widget title styles

Let’s look at a pure CSS change to round out our theme modification knowledge. The screenshot on the left shows the original title style on the bottom, our modified style on the top.

To make this change I modified the background color, the border, the padding, the font size and style and the margin. I used black with an opacity instead of specific shades to make sure it looks good independently of the background color.

Note that each widget type has a specific class you can use to style them differently. For example, to style only the recent comments widget title differently you can use .widget_recent_comments h4.widgetitle. Below I’ve styled all widget titles in the same way:

h4.widgettitle {
background: rgba(0,0,0,0.02);
border-left: 4px solid rgba(0,0,0,0.1);
padding: 7px 0 7px 11px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 11px;
}

Overview

We’ve gone through the three basic methods of theme customization: using hooks, overwriting files and modifying style rules. Keep in mind that hooks are the most flexible and modular of the lot, when possible use hooks!

As theme authors you should utilize them generously. Since Divi uses the built in body_class hook we had a very easy time modifying the theme to do our bidding.

Hopefully you can now add and remove bits and pieces to your existing theme. If you have any questions or you’re having trouble modifying your theme let us know!

Article thumbnail image by Dacian G / shutterstock.com