How to use the Appearance Editor in WordPress

Until now, you have had a chance to customize WordPress 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 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

When you are ready to get your hands dirty by typing some custom code, navigate to Appearance -> Editor. This built-in editor lets you change the code kept in 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.

WordPress Appearance Editor

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 template 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.

Templates

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 text in posts in Twenty Seventeen theme.

Before we continue, we would like to derail your attention for a brief moment. In the 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

Inspect elements in Google Chrome

If you still want to edit the stylesheet directly through Appearance Editor, here’s what to do:

  1. Open any post from your blog
  2. Select the text of a post
  3. Right-click on the selection and choose “Inspect” or “Inspect Element” (depending on the browser you use)
  4. In the new section or window that opened, find the highlighted <p> element

Inspect elements paragraph

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:

  1. Navigate to Appearance -> Editor
  2. If not already selected, choose Stylesheet (style.css) file from the list on the right side
  3. Find “p” class
  4. Add “font-size: 50px;” (the entire code should look like the one we wrote above)
  5. Click on “Update File” button

Modifiy paragraph font size

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 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 which 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 was introduced a few months ago.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *