Customizing a WordPress theme is fairly easy. Most themes are developed to be easy to use anyway, so you can put up a decent looking site without touching a single line of code. But sometimes, you cannot make the most of what a theme offers without making small tweaks in the theme’s code.
In this post, we’re going to look at how to customize a WordPress theme the right way. You will not become an expert at building WordPress websites but you will have a better appreciation of how to approach theme customization.
But first, why is theme customization important?
Well, if you bought a WordPress theme today – or maybe downloaded a free one – chances are hundreds of other people did just the same. That means the theme you’re going to use is probably being used on hundreds of other websites.
For that reason, your website will be as unique as your customization allows, so this is why theme customization is important and why you should approach it the right way.
Also, with customization, you can tweak a theme to do exactly what you want. It can be intimidating but it doesn’t have to be.
Follow this simple guideline when you want to edit a WordPress theme.
Understand the Structure of a Theme: Template Files
All WordPress themes follow a basic structure that you should be familiar with if you want to properly edit the theme files.
WordPress uses template files to load and display content on a requested page. A theme’s template files are stored under /wp-content/themes/theme-folder.
The key template files that you will be editing are header.php, footer.php, sidebar.php, and index.php. These are the core template files of a standard theme.
Another file you’ll be heavily editing is the style.css file. It basically controls how your website looks.
The basic template file that WordPress loads by default is the index.php file (provided there is no other template file that supersedes it in priority). It is also the only template file that’s needed for WordPress to load a theme.
With this basic intro to the structure of a WordPress theme, you’re now ready to start customizing your theme.
How to Customize a Theme
As I hinted earlier, customizing a theme’s look is basically about editing the style.css file, along with the header.php, footer.php, sidebar.php, and sometimes the index.php template files.
Step 1: Create a Child Theme
Before you touch any of the files mentioned above, you should create a child theme. It is not a must that you have to create it but it is the smart way to customize a theme.
A child theme is basically a folder containing a style.css file that inherits all styles of the parent theme.
So, create a folder in /wp-content/themes and provide a suitable name (such as twentythirteenchild).
Create a new CSS file and save it as style.css inside your new child theme folder. Copy the following lines of code and save the file, changing theme name and template to your own.
There’s a lot more you can add to the comment section of your style.css file, but it’s all optional except one line: Template: twentythirteen. This is what you should be concerning yourself with as it specifies the particular theme that is being inherited. Replace twentythirteen with the folder name of your theme under /wp-content/themes/.
And with that, you’ve just created a child theme for the theme you want to customize. This gives you a safe space to edit or customize the parent theme without editing its original files.
Since this post was published it has been pointed out in the comments section that the official WordPress codex has been updated, adding a recommended step to this process.
In addition to the new style sheet you created above, it is also now recommended that you create a functions.php file for your child theme and use the wp_enqueue_scripts action as the safest way to add/enqueue styles from your parent to your child theme.
All you need to do is the following:
1. Create a plain text document and name it functions.php
3. Save and place your new functions.php file in your newly created child theme
Step 2: Override Parent Styles
Once you have your child theme, you can start the actual editing of your theme without worrying about messing about with the original files. The style.css file you created is where you’ll do most of your editing.
To edit your theme, go to the admin dashboard and load the child theme you created in the previous step so that you can view the changes in the browser as you edit the styles.
To edit any part of your theme, load the page in the browser and then use something like Firebug to inspect the source code.
You’ll be able to see the exact styles you want to edit. Simply copy that code and paste it into the style.css file in the child folder and then edit the code as you want.
Step 3: Override Parent Template Files
Editing your theme’s CSS is great and fairly straightforward if you’re conversant with CSS. However, if you want to customize your theme beyond aesthetics, you need to edit its template files.
Depending on the complexity of what you want to achieve, you may need to write some PHP code. Needless to say, you need a basic understanding of PHP in order to be able to edit template files.
To edit a template file, copy the original file in the parent folder and paste it into your child folder. Then, make all your changes in the new file.
For instance, if you wanted to make changes to the footer section of your theme, you’d copy the footer.php template file into your child theme and then make the necessary edits there.
Since version 2.7, WordPress checks in the child theme folder first (if there is one) for template files. If an alternate template file exists in the child theme, WordPress uses that one instead of the alternate file in the parent theme folder.
You can even make edits to a particular category using the template file category-ID.php where ID identifies the category.
This basic guideline provides a solid foundation for you to customize your WordPress theme. You could edit the template files directly but that is unwise and certainly not recommended. This is the smart way of doing it.
Creating a child theme allows you lots of space to mess about and experiment with different things without being concerned about messing up code in the parent template files.
You also realize that if you don’t know PHP, you may be limited to only modifying the theme’s look via CSS. You may want to leave template file modification to a theme developer who knows how to properly customize them.
Hopefully you’ve learned something new and don’t mind sharing additional tips about theme customization you know.
We never spam. Subscribe to receive inspiration, news, and ideas in your inbox.
Brenda Barron is a writer from southern California. Her work has appeared on sites like Elegant Themes, WPMU DEV, and VentureBeat. She also blogs at Digital Inkwell about the life of a freelance blogger.