How do I use the Appearance editor in WordPress?

In WordPress, you have the option of editing the templates with the template editor; however, some specific changes can only be done in the code of the site. You can edit the code using the Appearance Editor in the WordPress dashboard. In this article we will explain how to change the size of the font in the menu of the "Twenty Twelve" theme using the Appearance Editor.

Steps to change the font of the menu

First you need to find the CSS code that requires editing. You do this by inspecting the code of your site. The following explains how to find the CSS code to edit.

Visit your website.

Highlight the menu items. Right click the the highlighted text and select view Selection Source (This is specific to FireFox. Other browsers will have a different way to inspect the code.)

Find the class for your navigation Menu. In this case the class we are going to edit it the nav-menuclass. See image to the right.

You should by default be taken to the style.css stylesheet. If not, make sure you are on the style.css page by viewing the "Styles" section on the bottom right, and make sure the style.css is blue highlighted like the image to the right.

Paste the class name at the bottom of the style.csspage. Make sure you have a ( . ) dot in front of it. The code should look like the following:

.nav-menu {}

You can add attributes to your CSS to change the size, color, and more of the text. In this example, we are changing the font size to 24 pixels (24px). The code looks like the following.