Themes control how your website looks and how content is structured. Even if you are not a designer, it is important for to understand how themes work in WordPress.
This tutorial will walk you through the “Appearance” section of the WordPress admin area and show you how to make basic customizations to your website.
After installing WordPress and configuring your website settings correctly, the next step is to set up your theme. It is best to configure your WordPress theme before activating plugins on your website. You can then choose plugins that complement your theme.
The configuration of your WordPress theme is done in the “Appearance” section of the WordPress admin.
For this instruction we will use the default WordPress Twenty Fourteen Theme
1) Click on ‘Appearance’ menu then Themes
2) There are three themes already downloaded with WP 4.0, Twenty Fourteen, Twenty Thirteen and Twenty Twelve.
3) You can choose one of them to configure. If you want to use a different theme, click on ‘Add Themes’ button.
4) Click on the ‘Upload Theme’ and upload your premium theme from WPHub in .zip format. Make sure that your theme has been zipped correctly. It is common for designers to include documentation, Photoshop files and other things inside their zip file. You want to make sure that your theme folder is located in the top level of your zip file (i.e. at / and not /files/theme-files/your-theme/).
5) File Transfer Protocol is a great tool for uploading new themes. Using an FTP client such as FileZilla, you can upload your theme folder to the /wp-content/themes/ directory. Your theme will then be displayed as an available theme in your WordPress admin under the Themes menu tab.
6) By default Twenty Fourteen is already active in WordPress version 4.0 and when you click on “Customize” on the left menu bar you will see this:
7) Your website title and tagline can be defined through the general settings area. It can also be changed through the customize section. There is also an option to hide the website title in this area.
When you use the “Customize” section you preview changes to your header automatically. It is a great way to see how your title and tagline will look in your header.
8) Twenty Fourteen allows you to change the header text and background colors using a color wheel. Some WordPress themes are more advanced in this regard; allowing you to modify the colors of multiple areas across your design.
9) The customizer also allows you to add a header image.
10) A background image can also be uploaded and aligned.
11) Next, you can set your Widgets on the Primary Sidebar, the Content Sidebar, and Footer Widget Area. You can control your widgets individually in the main Widgets tab under the Appearance section.
12) Static Front Page – Here you can set your front page and preview changes once they have been saved
13) Featured Content – Set your home page for a slider or a grid layout.
14) Appearance > Widgets
Widgets allow you to add content, menus and interactive features to your sidebars, header and footer. Widget areas are defined in your theme’s functions.php file. You will see each widget area available to you down the right hand side of the widget page.
The number of widget zones depends on the theme you are using. At the very least your theme will have a widget area in the sidebar,however some designs come with over a dozen widget areas. For example, a theme could have a widget area in the header, sidebar, footer, below posts, above posts and on the home page.
Adding widgets to your website is straightforward. All you have to do is drag a widget from the available widgets area on the left hand side of the page to the appropriate widget zone on the right hand side of the page. Each widget can be configured correctly once it has been dragged within a widget zone. Once you have saved your widget, load up your website and check that the widget you configured is displaying correctly.
Widgets can be deleted from your widget zones by clicking on the delete link at the bottom of the widget. Alternatively, you can drag the widget outside the widget zone and it will be placed in the inactive widgets area. This allows you to drag the widget back at a later date.
15) Appearance > Menus
The WordPress menu system allows you to easily manage navigation menus. Menus can also easily be inserted into other areas of your website using widgets.
To get started, click on the “Create a new menu” link and enter a name for your menu. I recommend using a name that describes where the menu will be placed or what links will be added. For example, I use “Main Menu” for my top navigation menu and “Information Menu” for the information menu in my footer that links to my about and contact pages. This simplifies things later if you create a lot of menus.
Along the left hand side of the menu page are lists of your pages, links, categories and any post formats you use. All you need to do is select what page, link or category that you want to add to your menu and click on the “Add to Menu” link. Once you have done that, you can rearrange the order of your menu items using drag and drop. By moving a menu item a little to the right of its parent item, it will be listed as a sub-menu. This simple system allows you to create detailed hierarchical menus in minutes.
Do not forget to save your menu at the end or your changes will not be applied to your menu. Once the menu has been saved, you can insert it anywhere on your website.
16) Appearance > Header
Many WordPress themes allow you to insert an image at the top of your website design. Header images are usually static, so to get the best look you are advised to use a defined height and width.
If the uploaded image does not match the suggested size, WordPress allows you to crop the image to the correct dimensions.
WordPress does not force you to an image of sufficient size. Therefore, if the image you use is too small, it may only take up part of your page.
17) Appearance > Background
A background image can be uploaded via the theme customizer or via the “Custom Background” page.
Images can be positioned to the left, centre or right. They can also be tiled and fixed to the background. A background color can also be defined; which is useful if you do not repeat your background image.
18) Appearance > Editor
All of your theme templates can be viewed through the WordPress theme editor. You can also edit templates through the theme editor if you have made your files writeable (through file transfer protocol or through your hosting control panel).
A good place to familiarize yourself with how WordPress templates work is the WordPress Codex. The developer of your theme should also provide documentation on how to manage the theme you are using.
You should obviously be cautious whenever you are modifying template files on a live website, particularly if you do not have experience with HTML, CSS and PHP. Be sure to always make a backup of your template files before applying any changes to them.
All WordPress themes are configured a bit differently. It is common for theme developers to use their own theme framework and use their own custom options page for their designs. Thankfully, more and more theme designers are updating their themes so that they comply with features such as the WordPress theme customizer, custom backgrounds and WordPress menu system so this will give you a good knowledge base to configure other WordPress themes.