How to Customize Your WordPress Theme (5 Step-by-Step Ways)
The challenge is finding the right way to do it.
In this post, I’ll steer you through the options for customizing your WordPress theme, help to decide which one’s right for you and show you how to do it safely and efficiently.
Options for Customizing a Theme
Before we dive in and start making changes to your theme, it pays to understand what the options are, as they suit different situations.
Here’s an overview of the options available to you:
- If you want to add functionality to your theme, install a plugin.
- Use the Customizer in your WordPress admin screens to customize fonts, colors and maybe layout too, depending on your theme.
- If you’re working with a page builder theme, use its features to customize the design of your site.
- If you’ve installed a framework theme, use one of the available child themes to customize your site, along with any customization options viable own the admin screens.
- If your theme is specific to your site and you’re comfortable doing it, edit the theme’s code directly.
- If you want to edit the code of a third-party theme, create a child theme.
If you want to edit the code, you have a number of options available to you, from using the block editor, to the Customizer, right through to editing the files. We’ll look at them all in this post, but let’s start with the simplest option: installing a plugin.
Do You Really Need to Customize Your Theme?
Sometimes you don’t need to customize your theme at all: instead, you need to install a plugin.
Themes dictate the design of your site: the way it looks and the way it displays content. Plugins add extra functionality.
If the changes you want to make are focused on functionality rather than design, consider installing a plugin yourself. This could be a plugin you need to write, one you download from the plugin directory, or one you buy.
If you find yourself wanting to edit the functions.php file in your theme, ask yourself:
Would I want to keep this functionality if I switched themes in the future?
If the answer is yes, that code should go in a plugin, not your theme.
Good examples of what you would use a plugin instead of a theme including adding widgets, registering custom post types and taxonomies, creating custom fields and adding extra features like a store or SEO enhancements.
Customizing Your WordPress Theme via the WordPress Admin Screens
If the changes you want to make are design-focused and relatively simple, you may be able to make them via the admin screens. The Customizer gives you a variety of options for tweaking your theme: what’s available to you will depend on your theme. And you may see something called the Editor in the Appearance menu. Steer clear of this, for reasons I’ll describe shortly.
Customizing Your Theme via the Customizer
The easiest way to customize your WordPress theme is using the WordPress Customizer.
You access this in one of two ways:
- When viewing your site (when you are logged in), click the Customize link in the admin bar at the top of the screen.
- In the admin screens, click on Appearance > Customize.
This takes you to the Customizer.
The WordPress Customizer
In the screenshot above, I’ve installed a free theme called ColorMag which has lots of customization options. It’s added sections to the Customizer for design features including a header image, social media, category colors, and a Design Options tab that takes you through to yet more tabs where you can make changes to the layout and design of your site.
Different themes have different customization options, but newer themes seem to be adding more and more of them all the time. If you find a theme that you like but that isn’t quite right for you, you might find that customizing it gives you exactly the design and layout you need.
The Theme Editor (and Why Not to Use it)
In your admin screens, you may notice an option called the Theme Editor, which you acmes via Appearance > Theme Editor.
The WordPress theme editor
This gives you access to the files in your theme, meaning that you can directly edit them.
Don’t.
Even if you’re comfortable writing CSS or PHP, editing the files in your theme like this is a very bad idea, for two reasons:
- If you’ve bought or downloaded a third-party theme, any changes you make will be lost the next time you update the theme (and you should keep your theme updated for security reasons).
- More importantly, if you make a change that breaks your site, it won’t be tracked and the previous version of the file won’t be changed. You could irrevocably break the site.
If you want to edit the code in your theme, you should do it using a code editor (check out the best free HTML editors), and you shouldn’t t edit the files in your live site until you’ve tested it on a staging site. If you need to edit a third-party theme, you should do so via a child theme. More on both of these later in this post.
WordPress knows how unsafe it is to use the theme editor: it even gives you a warning when you try to access it.
Warning not to use the WordPress theme editor
So take WordPress’s advice: don’t use the theme editor!
Using Page Builders and Frameworks to Customize Your WordPress Theme
A large proportion of WordPress themes have customization options, meaning you can make changes to the design and layout via the Customizer.
But some themes take this further and are designed to be extended and significantly customized. Those themes are called theme frameworks.
Another option is to use a plugin that lets you design your site using a user-friendly interface: those are called page builders.
Using a Page Builder to Customize Your Theme
Page Builder plugins are designed to make it easy for you to set the design of your site, using an interface that lets you see what you’re getting.
You install a page builder plugin with a compatible theme, and then use the options it gives you to design your site exactly the way you want it.
One of the most well-known page builders is Elementor, but you can find out about some alternatives in our roundup of page builders.
Page builders let you edit your posts and pages with a drag-and-drop interface, meaning you can see how your content will look and can make each page loo unique.
Below, I’m using the Elementor page builder with the Hello Elementor theme, which is compatible with it.
The Elementor interface
Page builders give you lots of flexibility with the layout and design of your pages. If you’re used to a website builder like Wix, they can help ease the transition to WordPress. And if you prefer a WYSIWYG interface for your WordPress content, they can help you design your pages quickly.
Using a Theme Framework to Customize Your Theme
An alternative to page builders is theme frameworks. These are suites of themes designed to work together. There’s one parent theme which is the framework, and a choice of child themes that you can use to customize the main theme and make it look the way you want.
An example of theme frameworks is Divi, which has customization options that let you tweak the design of your child theme even further, including a drag and drop interface similar to those of page builders.
The Divi theme
Editing Your WordPress Theme’s Code
If you’re comfortable editing CSS and/or PHP, then you can edit the code in your theme to customize your theme.
This gives you the greatest degree of control.
If you’re editing your own theme, which is specific to your site and was developed especially for it, then you can make edits to the theme directly. But if you’re working with a third-party theme and want to edit that, you should create a child theme to avoid losing your changes next time you update the theme.
Editing Theme Files
The first step to editing your WordPress theme is to understand which theme files control what, and which you’ll need to edit.
The Stylesheet
Every WordPress theme has a stylesheet, called style.css. It contains all of the code for styling your site: layout, fonts, colors, and more.
If you want to change the colors in your theme, for example, you would make edits to the stylesheet. If you want to add a new font, you would use the stylesheet to apply it to different elements such as the body text and the headings.
Pay attention when editing the stylesheet: specificity means that the code for an element isn’t always coming from where you think it is. Elements will inherit styling from other elements that are above them in the hierarchy of the page unless you add styling which is specific to the lower element.
To discover what CSS is affecting which elements on the page, you can use the inspector in your browser to view the CSS (Chrome DevTools in this example):
Inspecting code in a WordPress site with Chrome DevTools
You can then use this to write new CSS that targets individual elements or a range of elements or classes on the page.
If all this talk of elements, classes, and specificity is new to you, you may want to steer clear of directly editing your theme’s CSS. At least until you’ve learned more about CSS and how it works.
The Functions File
Another file that pretty much every theme will have is the functions file (functions.php). This is the file that makes a bunch fo stuff work in your theme. Inside it, you can find code to register theme features like featured images, widgets, and more.
If you’re tempted to add functional code to your theme, this is where you’ll add it. But beware: in most cases, you should really be writing a plugin. Ask yourself:
Would I want to keep this functionality if I switched themes in the future?
If the answer is yes, write a plugin instead of adding code to the functions file. Plugins don’t have to be big: there’s nothing to stop you from creating one for a couple of lines of code.
The functions file is all written in PHP, so you’ll need to be familiar with that. Don’t blindly copy code you find via a Google search: take the time to work out what that code does and to understand it. That way you’re less likely to add code that isn’t as good as it should be.
The Theme Template Files
Most of the files in a theme are theme template files. These are files which determine what content WordPress outputs on a given page, and are chosen according to the template hierarchy.
If you want to change the way content is output on a given post type, page, or archive, you’ll need to either edit one of these files or create a new one.
For example, say your theme has an archive.php file that’s being used to output archive pages for categories and tags. You want to make changes to the way tags are output. So you create a file called “tag.php”, which would be based on archive.php with your tweaks.
Again, be careful editing the files: they could break your site. Always test on a local installation and/or staging site first.
Whichever of these file types you need to edit, you should do it properly. Read the section below on best practices to find out how to edit your code in a way that won’t break your site and won’t cause you security headaches.
Customizing a Third-Party Theme With a Child Theme
If the theme you’re running on your site is from a third-party and you want to edit the code, you’ll need to create a child theme.
This is because if you edit the theme directly and then you update it (which you should), you’ll lose all the changes you made.
Creating a child theme consists of four steps:
- Create a new folder in wp-content/themes.
- In that folder, create a stylesheet. In that stylesheet, tell WordPress that this is a child theme of your existing theme.
- Add copies of the files you want to edit to the child theme and edit them there.
- Activate the child theme in your site.
WordPress will always use a file from the child theme to output content unless there is a file higher in the hierarchy in the parent theme. If there are two versions of the same file, it’ll use the one from the child theme. This means your new file in the child theme will override the one from the parent theme.
Tired of a slow host? Kinsta is built with speed and performance in mind. Check out our plans
Best Practices for Customizing WordPress Themes
So you’re planning on customizing your theme. Before you go ahead and make the changes, follow these tips to ensure you’re doing it safely and that you won’t break your site, make it vulnerable to attacks, or lose your code.
If Possible, Customize Without Editing Code
If you can make your customizations via the Customizer or elsewhere in the admin screens, this is safer than editing the code.
Only edit the code if you ware familiar with CSS (for the stylesheet) and PHP (for other theme files) and you know how to do it safely.
Use a Local Development Site to Make Your Changes
If you’re editing the code in your theme or creating a child theme to make changes, you should do the development work on a local installation of WordPress with your theme installed and your content copied from your live site.
This way, you have a mirror of your live site to test your changes. Working on a local site will have no effect on your live site and can be quicker.
Even if you’re using the Customizer, it can be helpful to use a local version of your site for testing as you can publish your changes and test them out without affecting the live site.
Once you’ve tested the changes to your theme you can upload it to your live site or, even better, you can test it on a staging site and then push it to live.
Use Version Control
When you’re making changes to your theme, you should use version control to track your changes.
At its simplest this means changing the version number of the theme and keeping copies of both versions. But if yours gong to do version control properly, you need to use a service like GitHub to track your changes.
This way, if a change causes problems, you can easily roll it back without having to make manual edits.
Version control is even more helpful if you’re working as part of a team, as you’ll be able to see what other members are doing. Make sure to read our git vs Github guide.
Use a Staging Site to Test Your Changes
If you have access to a staging site (such as Kinsta’s free staging that comes with all plans), testing on this before activating the new version of your theme (or the new child theme) on your live site is the safest way to proceed.
myKinsta staging
This is because any local site will have some differences from your live site: it’s on a different server (one created on your local machine), it may be running a different version of PHP or any of the other tools that run your site.
Make a copy of your live site on your staging server and then upload and activate your new theme. Test your site thoroughly to be sure everything works, and then you can push your changes to your live site.
Make Your Theme Responsive
Any changes you need to make to your theme should work on mobile as well as desktop.
With more and more people accessing the internet via mobile phone, and the Mobile-first index from Google, it’s probably more important now for your theme to work on mobile than it does on desktop. So any changes you make to your theme need to be mobile-friendly or preferably mobile-first where relevant.
This will mainly apply to any changes you make to your styling or layout: check that the new layout works on mobile and that you’ve added media queries so that the layout adjusts to different screen sizes.
If your theme isn’t responsive, it’ll negatively impact your search engine rankings and conversion rates.
If you don’t have access to lots of different mobile devices to test on, you can use a tool like BrowserStack to see how your site looks on different devices. You can also use the Developer tools in your browser and the responsive views in the Customizer.
Responsive tools in the WordPress Customizer
Make Sure Your Customizations Don’t Impact on Accessibility
Any changes to your theme also need to be accessible for users with disabilities or sensory impairments.
This isn’t just about ensuring your site works on screen readers: other considerations such as color schemes and font sizes are important for a large number of people.
If the changes you’re making to your theme are to make the colors brighter or the text smaller, think again: this might make it difficult for people to read or interact with your site.
Before you make any changes live, use an accessibility checker to test your site and be sure it isn’t excluding people.
Stick to the WordPress Coding Standards
If you’re editing the code in your theme or creating a child theme, you must make sure your code is in line with the WordPress coding standards.
These standards exist to ensure consistent and quality of code and to avoid code that’s a mess. There are standards for PHP, CSS, and JavaScript so take some time to check those that are relevant to you and make sure you follow them.
If your existing WordPress theme is well-coded and you write any new code in a way that’s consistent with that, you’re on the way to ensuring that your code is compliant. Make sure you add comments to any changes you make to the theme so that you or others know what you did when you come back to work on the code in the future. You may think you won’t forget but after a few months have passed, it’s surprisingly easy to forget why you edited a line of code.
Summary
Customizing your WordPress theme isn’t all that difficult. Sometimes it’s a simple case of using the Customizer to make changes to the fonts or colors (make sure to read our in-depth guide about WordPress fonts). Other times, you have to create a new child theme to add a new template file to a theme.
The options you have for customizing your theme include using a plugin or the Customizer, editing the WordPress theme’s code directly, or creating a child theme.
Identify the right option for you and make your customizations safely, all without breaking your site.
If you enjoyed this article, then you’ll love Kinsta’s WordPress hosting platform. Turbocharge your website and get 24/7 support from our veteran WordPress team. Our Google Cloud powered infrastructure focuses on auto-scaling, performance, and security. Let us show you the Kinsta difference! Check out our plans
0 Comments