Three Ways of Customizing a WordPress Theme without Messing up Core Files

In this post, I’m going to show you three approaches to WordPress theme customization that don’t involve modifying the theme’s core files.

There’s a very important reason why leaving the core files untouched is the way to go: it ensures that whatever modifications you make will be preserved after installing an updated version of your theme.

You’ll learn when it’s appropriate to use each of the three methods. Also, I point you to a couple of useful plugins that will make your theme makeover labors much easier.

Stop Hacking away at Your Theme’s Files

I haven’t much free time, but when I do, one of the places I like to hang out is the WordPress.org support forum.

As I start helping somebody out with setting up and customizing their WP.org theme, I often come to realize that they’ve been modifying the theme’s core files long before asking for help on the forum.

A huge number of WordPress theme users is still in the dark as to the importance of refraining from the urge of messing with the theme’s core files. This means that educating on the appropriate use of themes must be an on-going commitment for all who support this awesome platform and its community.

If you’re adding or removing bits and pieces by going into your theme’s core files, stop right there. Not only can you be mangling and breaking your theme, but by the time your theme is updated, all your mods will be lost.

To avoid any unpleasant surprises, you can adopt one of the following three methods. Each has its role and not all of them are to be used together.

WordPress Customizer Options

Before even thinking about adding or removing code, a good idea is to go into the Customizer panel by clicking on Appearance > Customize.

This is where the theme developer places some useful controls that let you choose and preview changes to the look and feel of some aspects of your theme quite conveniently without any coding.

It’s up to the developer which options you find there. If you’re satisfied with what you can do with the Customizer in your chosen theme, then save and publish your mods and you’re done!

If you want more, then you need to adopt either of the alternatives discussed below.

Custom CSS Editor

You can change a lot in your theme using CSS alone.

Some themes include a dedicated text editor to add your own CSS styles. These will be preserved after a theme update.

If your chosen theme doesn’t offer this functionality, the WordPress.org plugins repository offers a number of great alternatives.

I personally use the Simple Custom CSS plugin by John Regan and Danny van Kooten.

You just need to install the plugin, activate it from the plugins panel of your WP installation, and access the custom CSS editor it creates from the Appearance menu.

If you’re familiar with CSS, add your style rules there and save work. Your changes will survive through all future theme updates. Cool!

Child Theme

If your changes are not limited to CSS, but also include theme functionality and page structure, then a child theme is your best friend.

More specifically, if you need to modify functions in the theme’s functions.php file, remove the sidebar from page.php, change some text in footer.php, etc., you need a child theme.

If you’re looking for guidance on how to create a child theme using current best practices, here’s a step-by-step tutorial I created recently to illustrate how to add a widget area to the Twenty Fifteen default theme. Alternatively, a quick search on your favorite search engine will give you what you need.

If you don’t feel like going through the steps of manually creating a child theme, here’s a great plugin that does the job for you: Child Theme Creator by Orbisius.

I’ve recommended this plugin to WP.org forum users who had never created a child theme before, and so far all of them have accomplished the task easily and quickly without any explanation from me.

Do I Use the Customizer, a Custom CSS Editor, or a Child Theme?

Some of the WordPress users I get in touch with at work or on the WP.org forum start by adding some simple CSS modifications to their theme using a custom CSS editor. Later, they decide, for instance, to remove the sidebar from page.php. They go into their theme directory, open page.php in a code editor, find get_sidebar() and delete the snippet.

My immediate reaction is to stop them and advise them to use a child theme. It’s great to see how quickly this recommendation is followed, usually thanks to the plugin I mentioned above. However, I see that they still keep the CSS mods inside the custom CSS editor.

This is the place to make the following point quite clear: use the custom CSS editor for CSS only modifications. To add structural changes to theme template files or functions, use a child theme. Once you add a child theme, you can do without the custom CSS editor and place all your CSS modifications inside your child theme’s style.css file.

Using the Customizer together with the custom CSS editor or with the child theme is fine. This is because you write CSS or PHP code to add only those modifications for which the Customizer doesn’t provide the appropriate options.

In other words, the custom CSS editor or the child theme complement the Customizer by adding customization possibilities not offered by the Customizer. On the other hand, the custom CSS editor and the child theme are alternative to each other – use either one or the other, not both.

To Sum Up

In this post I focused on the importance of not touching core files when customizing a WordPress theme. I also showed three approaches to modify your theme by leaving its core files intact, i.e., the WordPress Customizer, a custom CSS editor, and a child theme.

Which approach do you prefer when you customize your WordPress theme? Let me know in the comments below.
Advertisements

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s