How to Modify WordPress Theme

How to Modify a WordPress Theme

In this short post, I’d like to share with you some approaches on how to modify a WordPress theme. We’ll be focusing on different kinds of modifications, big and small.

But before we get to theme modification techniques, let’s focus first on how not to do theme modifications.

The Wrong Way

I believe, it was said many times before me, but I still see people make the same mistake over and over again and modify the theme directly. Don’t do that. This is a very bad idea because your modifications will be erased completely after you update the theme. There’s no way of undoing this unless you have a backup. You do have a backup right?

The Right Way

Okay, so how to modify a theme the right way then? Well, I tend to think of theme modifications in two ways and there are two different approaches for each of them.

Small Adjustments

By small adjustments I mean changes that can be done only with CSS. Think hiding unwanted element, or changing a link color. To perform these kinds of modifications, you don’t need to hack into theme files or create a child theme (we’ll cover it later).

All you have to do is install Jetpack’s Custom CSS module and add the styles you need. Alternatively, you can use Simple CSS plugin if you prefer not to use Jetpack for any reason.

So let’s say, you want to hide the link to the comments in a blog layout of a Maker theme. First, you need to find out the name of the class or id that this link has. To do that open the inspector. In Chrome just right-click on the element you want to inspect (in our case it is the link to the comments) and click Inspect.

How to Modify WordPress Theme

We can see that the link has two classes, entry-meta-item and comments-link. We’ll use them both to make sure that we won’t hide any other .comments-link on other pages.

So the code we need to add with Custom CSS plugin looks like this:

.entry-meta-item.comments-link {
    display: none;
}

This little snippet will hide the comment links. You can try it. I alway use Custom CSS module for these kinds of small adjustments.

Theme Core Customizations

But what to do when adding styles is not enough? You might want to add a new page template or modify a template tag or rewrite the entire style.css. If this is the case, you should create a child theme.

A child theme is basically a theme that by default inherits all functionality from the parent theme (the one you want to modify). It is the best way of modifying the WordPress theme because your modifications won’t be deleted even after a theme update.

So how exactly do you create a child theme? First of all, you need to think of a name and the slug for your child theme. I’ll use Maker Child and maker-child respectively as an example. You’ll use the slug for a folder name and the handle for translatable strings.

Navigate to wp-content/themes and create a folder maker-child with two files inside: style.css and functions.php.

The minimum required content of the style.css should be as follows:

/*
Theme Name:  Maker Child
Template:    maker
Text Domain: maker-child
*/

The most important line here is the second one. This line declares that this is actually a child theme, and that the parent theme is Maker.

Now let’s look at the contents of functions.php:

<?php
function maker_child_scripts() {
    wp_enqueue_style( 'maker-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'maker-child-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'maker_child_scripts' );

In this file, we do two things. First, we create a function that adds all the styles and scripts to our website, within the body of this function we enqueue the parent theme styles and then the child theme ones (If you want to rewrite the CSS completely, you can enqueue just the child theme styles). And lastly, we add the function to the wp_enqueue_

Now the skeleton for your child theme is ready. To see if it’s working you can log in to your WordPress admin, navigate to Appearance → Themes, and check if Maker Child theme is in the list of available themes. It should be there.

So the first thing you might want to do is edit the CSS? All the CSS modifications obviously go to style.css file. Because the child theme styles are loaded last, they will overwrite any style of the parent theme.

The cool thing about child themes is that you can also overwrite templates. Let’s say you want to tweak the single.php in some way. Just copy it from the parent theme, put in the root folder of your child theme and start hacking. Now the single.php will be loaded from your child theme folder.

Wrap Up

As you can see, modifying a WordPress theme the right way doesn’t take much time, and doesn’t require super advanced dev skills. The main thing to remember here is not to modify the theme directly.

To make things easier, I’ve created a starter child theme for Maker, that you can use to speed-up customization process. It already enqueues the parent CSS and registers the empty CSS for customization.It also adds an empty JavaScript file, in case you need it.

Feel free to download it from the theme page and create the best modification to Maker!

And just to let you know, if you need customization for one of my themes, but don’t want to spend time on it, I’m glad to offer you theme customization services. Let me know what’s on your mind and I’ll get back to you with further details.

Happy theming, guys!

2 Comments

Leave a Comment

Your email address will not be published. Required fields are marked *