Making changes to your WordPress theme is a common task. Yet, it’s an undertaking that can have negative visual and functional consequences, slow down your website, or even crash it, if done improperly. That makes it daunting, especially for beginners or anyone unfamiliar with HTML, CSS, PHP, and JavaScript. Given the popularity of page builder plugins and a variety of free and paid WordPress theme templates, the fear is present and growing. In contrast, if done carefully, gradually, and safely, it’s a superb way to please your visitors in nearly every regard. With that said, let’s dig into how to edit a theme in WordPress.
Things to do before you edit your WordPress theme
As mentioned, this is an action you shouldn’t take lightly. An ounce of prevention is worth a pound of cure, as they say. Thus, we propose you take these steps before you begin customizing your theme in WordPress:
Make a backup
Even if you aren’t making extensive changes, creating a backup regularly is standard practice. It’s pivotal you do it before editing a theme, though. You may use a backup plugin for WordPress, employ third-party cloud services, or have your hosting take care of it. That way, you can restore your website to a previous state if things turn sour.
Set up maintenance mode
Another strongly recommended step. It’s a great way to keep your website online but inaccessible to regular visitors. However, admins and users with the necessary privileges can not only see the website but continue to contribute to editing or creating content.
Create a staging environment (Alternative)
If you neither want to take your website offline nor configure maintenance mode, a staging environment is the next best thing. You can create an independent copy of your website, then customize the theme to your heart’s content without worry. Once you’ve ironed the kinks out and feel satisfied with the result, simply repeat that on the live website.
Make sure to employ a child theme
While you can undoubtedly edit the main theme, we don’t suggest it. That’s because any edits you make to the theme template will be wiped the next time you update it. Sure, you can solve this issue by installing a plugin to save all the custom changes, but at that point, you’re using extra resources unnecessarily. Therefore, create a child theme in WordPress, and only edit those files, regardless of the method below you pick.
Test website speed
We don’t doubt your goal when altering your WordPress theme has to do with functionality and visual appeal. However, it mustn’t worsen the website speed, primarily page loading time. After all, people won’t appreciate the work you put in if the page takes too long to load. They will likely leave before they get a chance, even. To avoid that, we suggest looking at several ways to boost website speed. Having before/after results is another reason to do so.
1. Edit your WordPress theme CSS
With precautions in place, you’re ready to begin editing CSS in WordPress. CSS, or Cascading Style Sheets, is the style sheet language responsible for the way your website looks, i.e, its styling, and the primary building block of any theme. It would be redundant to go over the steps in detail again. Therefore, we’ll focus on the benefits of each method, so you know which one suits your needs and experience level.
Methods of altering CSS for your theme are as follows:
1. Using Theme Editor
This is an alternative to method 3 that is, unfortunately, equally dangerous for newbies, since you’re editing your source files directly. You won’t have any code-checking functionality to stop you from making a mistake. To be frank, we don’t suggest it unless you’re adept at CSS and need to make minor changes. That’s primarily because you lack a direct preview of alterations.
2. Utilizing Theme Customizer (Live Preview)
Though beginner-friendly, we’d propose this method to just about anyone for three key reasons:
- You can see edits you make in real-time, on the right-hand side of the code you enter
- The code you enter is confined to a text box and an “Additional CSS” section, not buried within hundreds of lines of code. Thus, the changes you make are easy to read and copy for additional troubleshooting
- If things go awry, you can simply delete the entire aforementioned section and restore your website to its original look and feel
The downside is that, since you don’t have direct access to source CSS files, you’re limited in what you can do and how much you can change on your theme.
3. Accessing website via FTP
Alternative to method 1 that requires an FTP client or access to cPanel. Superior for extensive changes to your WordPress theme, perhaps an overhaul. However, it comes with the same downside of leaving no room for error and having no way to preview modifications before you save the code.
4. Using a WordPress plugin
Installing a WordPress plugin to edit the theme in WordPress can mean:
- Plugin for adding CSS: Ideal when you made changes to your theme, not your child theme. It allows you to preserve changes through theme updates. Also, carries all the benefits of method 2, as plugins often utilize built-in Live Preview.
- Page builder plugin: Perhaps the best option mentioned so far. It allows for comprehensive (for supported theme) alteration, it’s easy to use, and provides visual feedback for any change you make. Additionally, most page builders have premium options and add-ons that make adding complex things straightforward.
- Plugin for safe theme activation. This is something we didn’t mention in the aforementioned CSS article. There are plugins that let you preview a theme you edited without activating it. Useful if you want to avoid creating a staging website, since you won’t need to write or design anything again when you’re ready to go live.
2. Make changes to PHP
Don’t forget the key part PHP plays in the functionality of modern themes. Things such as setting up widgets, adding a featured image, creating a picture gallery, or embedding videos owe their existence to certain .php files. A crucial one is named functions.php and located in the theme folder (wp-content/themes/child-theme-name). It’s accessible via FTP or Theme Editor (sub-methods 1 and 3 above).
You can also activate a plugin that supports code snippets and paste your PHP code there. That way, you gain benefits laid out in sub-method 2, including persisting through updates or switching to a different theme.