When you are using an “off the shelf” WordPress theme (i.e. one that you didn’t code from scratch or have built for you), there may be circumstances where you want to customize it beyond the scope of the controls it gives you.
There are best practices for customizing WordPress without doing anything that will break your site or make it a nightmare to maintain.
Learning from the beginning how to customize the right way will make your future-self’s life much easier:
- Your changes will be future-proofed to keep each layer of your site update-able: WordPress core, themes, plugins.
- Using WordPress best practices means that if you are building the site for someone else to maintain, or if you will have someone else helping you in the future, they won’t have be Sherlock Holmes to figure out how the site works.
- You’ll have confidence and peace of mind when experimenting with your site, knowing that you’re not going to break something beyond your own ability to repair.
Creating a child theme is a common piece of advice for customizations. Sometimes a child theme is necessary and sometimes it can be overkill.
If you need to modify PHP template files, you will definitely need a child theme. But if you are just modifying CSS, or your functions.php file, you don’t necessarily need one.
Here are 2 ways you can safely customize your site without having to create a child theme. These methods can be a good starting point for beginners who aren’t quite ready to mess around with FTP and some of the other steps needed in making a child theme.
Hopefully you have your own local environment or a staging site of some kind, where you can try out these techniques. If you don’t, you can create a sandbox or staging area using this guide.
CSS customizations for Classic themes
The WordPress Customizer comes with an Additional CSS field that allows you to safely add custom CSS to your theme:
Customizer → Additional CSS
Keep in mind that this CSS is theme-specific. That means if you change your theme, the CSS will not be transferred to the new theme.
So it’s not the best place to add customizations for non-theme elements, since those changes would get lost if you switch themes in the future.
If you want to be able to transfer styles in the future, you can use the Modular Custom CSS plugin instead.
After activating this plugin, you’ll see it by going to Appearance > Customize > Custom CSS.
There are 2 areas:
- Theme CSS – this will only affect your current theme – if you change themes it won’t carry over
- Plugin CSS – this will be transferred between themes.
Try It Out
This is a simple customization to the free Storefront theme. It increases the font size of the site title and tagline and changes the color.
Copy the following code and paste it into the Custom Theme CSS box:
.site-branding .site-title a {
color: #FF0000;
font-size: 2em;
}
.site-branding .site-description {
font-size: 1.25em;
color: #000000;
font-weight: 700;
}
CSS customizations for Block themes
If you are using a block theme with full site editing, you won’t be using the Customizer, but there is still a way to add your own general CSS in the Site Editor:
- Go to Appearance → Editor → Styles
- Click the edit icon.
- Then in the right panel, scroll to the bottom and you’ll see the Additional CSS field.
The Modular Custom CSS plugin will force the Customizer to still be available so you can still use the “Plugin CSS” feature that way. But without the Customizer, there isn’t a Site Editor native way to add “plugin CSS.”
So if you want to add some CSS independently of your theme, without keeping the Customizer alive, you can use a code snippet plugin like WPCode (formerly known as Insert Headers and Footers).
- Add a new CSS Snippet
- Add your code
- Choose the location – I usually choose “Auto-Insert” and “Site Wide Header”, but there are more customization options if needed.
PHP Functions
For anything you would typically add to your functions.php, you can use either of these plugins instead:
Touching PHP, even when just copy/pasting code, can be a bit daunting because you have the ability to whitescreen your site. Even seemingly simple mistakes, like missing a bracket, can cause an error.
The plugins mentioned above provide a bit of a safety net because they have some checks in place that make it harder to whitescreen your site.
Next Steps
When you get more advanced, you could graduate to using a Custom Functionality Plugin that you write yourself, in order to contain all your custom functions for a site. Genius developer Bill Erickson was the first person that I saw to write about this concept.
CSS tricks has a nice post on it as well.
If you do find yourself needing to use a child theme, check out Matt Cromwell’s guide on how to do that.
So now you have some tools with which you can experiment on your site – have fun!