How to Customize your WordPress Theme

Your theme is activated and looks great! If you are happy with the way it looks, then you are all set. But, chances are there is something you want to change. It could be a font is too small, or something is a dumb color, or there are parts of a web page that you don’t need.

Before we get started, it’s a good idea to add at least one post (if you are doing a blog) and one page, just so you can see what they look like when the theme changes.

Appearance Menu on the Admin Screen

This is where the Appearance link on the admin screen comes in. In Appearance, there are several options to customize your themes appearance. Unfortunately, every theme is different, so there is no guide that could encompass all themes. If you purchased a theme, go to the website where you bought it, and look for the theme documentation. This can help you understand how that particular theme works. For the theme I recommended (Zakra), the documentation is here.

Theme

Click on Appearance → Themes. From here you can change your theme. When you first log into a new WordPress website, you will start with a few default themes, made by WordPress. If you have downloaded a theme from the internet that you want to use, you can add it to your website from this page.

See the How to Add a WordPress Theme chapter for how to add a new theme from the internet.

Customize

When you click Customize, you are taken to the frontend of your website, with a special sidebar on the left. The sidebar is full of settings that control a wide variety of settings for how your website looks and works. Customize also shows you these changes right as you make them, so no need to save to see what changes you made.

What shows up in Customize depends entirely on your theme, and some themes will have quite a few options in Customize, and some have only a few. When you are trying out different themes, take a look in Customize to see what you can control.

When you make any changes using the Customize sidebar, make sure to press the Publish button at the top of the sidebar.

Widgets

A widget is an optional add-on for your website. They have preset locations where they will appear, controlled by your theme. Widgets are similar to plugins: they add functionality to your website, but they are usually less exciting. A common widget is a search bar for your website, or a gallery of photos. If you don’t want to use them, you don’t have to.

Themes usually have one sidebar for widgets, but could have more. Some themes won’t have any widget areas. Some put a widget area in the footer of your website. To see how many sidebars you have, and to customize your widgets: from the admin screen, click on Appearance → Widgets.

Widgets Page

On this screen, on the left, you will see all available (but unused) widgets. On the right, is all of your widget areas, and any active widgets. A widget area is the place on your website where that group of widgets will show up. It could be on all pages, on the homepage, in the footer, or only on blog pages. It depends on how your theme is set up.

You may need to open the widget areas to see what’s inside. To open a widget area, click on the title the widget area rectangle. WordPress automatically adds a search, tag cloud (for blogs), and categories (also for blogs).

How to Add a Widget

You can add a widget by choosing one from the list of available Widgets, and clicking-and-dragging to the right, and drop the widget on top of the widget area rectangle where you want the new widget to show up. That’s it!

How to Customize a Widget

Some widget can be customized once you add them. You can do this by clicking on its name, which will open up that widgets settings, if any.

How to Remove a Widget

To remove a widget, click on the widget so its setting appear, and press Delete.

Please note there is no save button on this page, it does it automatically, but if you customize a widget, you will need to press the Save button on that widget.

Menus

A menu is a customizable list of pages that visitors to your website use to navigate from one page to another. A menu is usually on the top of all pages, but some themes put the menu along the side, or even attached to the bottom edge of the screen. Some themes even have multiple menus, for example, there could be a second menu for the footer. You can also make more menus, but it will come with at least one primary (main) menu.

You can change what shows up in your menu by visiting Appearance → Menus. From this page you can edit your starter menu, or make more.

Manage Menu Locations

On the top of the page, notice the two tabs: Edit menus, and Manage Locations. You start on the Edit menus tab. Manage Locations allow you to switch which menu shows up in which location. A good theme will set this for you.

Switch Menu to Edit

Just below the tabs at the top of the page there is a box that has “Select a menu to edit”. You can use this drop down to switch between menus so you can edit them. You can only edit one menu at a time.

Menu Page Layout

Below the tabs you will see a sidebar on the left side of the page, labeled Add menu items. This is a list of all the items you can add to your menu. You can add pages, blog posts, custom-made links (for example, a link to another website), and blog post categories. Usually menus only have pages, but it’s up to you. If you are selling products on your website, there will also be a list of products.

To the right of the sidebar is your Menu structure. You can use this area to drag-and-drop the order of your menu. When rearranging, be mindful that all the menu item boxes are lined up on the left side. It’s very easy (and infuriating) to put a menu item inside the one above it, which makes a drop-down menu.

Example of a menu in the WordPress admin screen
The Blog page will be in a drop-down, under About.

You can tell this is happening when the menu item you just moved is more to the right than the other menu items. If this happens, just try to move it again.

How to Add a Page to the Menu

Make sure all the pages you want to add have been created and published. You can not put a draft page in a menu.

On the page, in the left add menu items sidebar, check the box next to the page you want to add to the menu. If you don’t see the page you want, you can try clicking on View all just above the list of pages. You can add multiple at the same time.

Then, press the Add to Menu button. This will put your new page at the bottom of the menu on the right side of the page. If desired, click-and-drag your new menu item to the position in the menu you want.

Repeat this process for every menu item you want. When done, press the Save Menu button on the far right of the page.

Menu Settings

At the bottom of the page, there is an option: Auto add pages as a checkbox. If you check this option, any new pages you make will automatically be added to this menu, when you publish the page. This saves you the hassle of adding it yourself, but it can add pages you may not want in the menu. It’s your call. I usually leave this option unchecked, and control the menus myself.

Theme Editor

Under Appearance → Theme Editor, you will find direct access to your active theme’s code. From here, you can modify the CSS, HTML, and PHP code. This course isn’t about coding, so we won’t dwell on this section. Just know that if you make even one mistake in this area, your whole website can go down. Trust me, I put a semicolon on a page in this area one time, pressed the save button, and the website was so broken, I had to hack into the database to undo it.

If you have a little CSS you want to add (the language that controls colors, sizes, and layout), you can safely add CSS from Appearance → Customize, then go to the bottom of that page, click on Additional CSS. No need to add anything to your Theme Editor.

Child Theme

When you go into this page, there is a warning. The warning is saying you shouldn’t ever make direct changes to your theme. If you do, when you update the theme your changes will be lost.

If you want to make changes, WordPress recommends making a “child theme”, which is a copy of some of your theme’s files that you can edit. This helps separate out your changes from the original code.

It’s a bit fiddly to set up. Here is a guide to help you if you want to give it a try. Remember to back up your website (I use the Duplicator plugin), and have a copy of the backup on your computer, in case you can’t get back into your website.

If you are serious about making changes to the code, you should be using an FTP client like Filezilla, and a code editor, like Sublime. Use this guide to securely connect to your website via sFTP. You should still make a child theme if you are connecting with Filezilla. Good luck, brave adventurer!

Next Chapter: All About Plugins