Until now, you have had a chance to customize WordPress CMS through various user-friendly editors. The Customizer has allowed you to peddle through different appearance options that your theme supported. But when you decide to personalize your site beyond the given options, you should know about the WordPress Appearance Editor.
Among many files in WordPress that can be modified, there are two particularly interesting ones. We are talking about the theme’s template and stylesheet files that you can edit directly from WordPress.
Before you even start to consider changing code on your own, we should warn you that WordPress does not create backups of the affected files. So, any changes are permanent.
How to edit themes with the Appearance Editor
[VIDEO] Code Editor section: ► Subscribe for more useful videos
When you are ready to learn more about WordPress and get your hands dirty by typing some custom code, navigate to Appearance -> Editor. This built-in editor lets you change the code kept in the theme’s template and stylesheet files. Once you open it, the style.css file that your current theme is using will be automatically displayed in front of you.
Depending on the setup of your site, you may not be able to access some files. If so, WordPress will display a warning message to tell you that you need to change file permissions for that particular file. To learn more, see how to change file permissions in WordPress.
How to select files for editing
As soon as you open the Editor, WordPress will show you all the available templates and stylesheet files of the active theme. If you want to edit an inactive theme, go to the top of the list, choose an item from the drop-down menu, and click the “Select” button. WordPress will then load all the files associated with the chosen theme.
To select a file, go through the list on the right side of the window. Each one has a name and filename shown in brackets below. To edit any of the files, just click on it and the code will appear in the left side editor.
“Be careful”
While editing stylesheet files is relatively safe, editing PHP files may cause errors that can render your site unusable. Be very careful if you decide to edit PHP files from the Appearance Editor.
Example: How to change font size via the Appearance Editor
To show you how the editor works, we are about to change the font size of the text in posts in the Twenty Seventeen theme.
Before we continue, we would like to derail your attention for a brief moment. In version 4.7, WordPress introduced a new feature that lets you add custom CSS more quickly. Instead of editing the code through the Appearance Editor, we suggest to open Appearance -> Customize -> Additional CSS where you get to write any custom CSS code you want without directly affecting the stylesheet.
Inspect elements
If you still want to edit the stylesheet directly through Appearance Editor, here’s what to do:
- Open any post from your blog
- Select the text of a post
- Right-click on the selection and choose “Inspect” or “Inspect Element” (depending on the browser you use)
- In the new section or window that opened, find the highlighted <p> element
The class should also be visible in the “Styles” tab. If you click on the style, your browser should open the stylesheet and allow you to edit the CSS directly from the browser. You can use this function to test custom CSS code before actually applying changes to your site. Since we wanted to modify the font size of text in posts, the following CSS code is in our interest:
p {
font-size: 50px;
}
Apply changes
After testing a few font sizes from the browser, remember the one that you liked the best. Then you can proceed to the Editor and modify the font:
- Navigate to Appearance -> Editor
- If not already selected, choose Stylesheet (style.css) file from the list on the right side
- Find “p” class
- Add “font-size: 50px;” (the entire code should look like the one we wrote above)
- Click on “Update File” button
The new style is saved, and you are ready to reload the site. Open any post to see the change in the size of the text. If you can’t see the difference, and you’re sure that you have adjusted the code correctly, make sure that you clear the browser cache or press CTRL+F5 to refresh the page.
Be careful when working with Appearance Editor
Appearance Editor is an amazing tool for doing quick changes to template and stylesheet files. But to make the best out of it, it is important that you’re completely sure about the changes you’re making. Any change to PHP files may lock down your site until you fix them via FTP. So, when working with PHP files, we suggest that you work on a local file that you can transfer via FTP while keeping the original backup at all times. If doing modifications to stylesheets, don’t forget about the Additional CSS features that were introduced a few months ago.