How to Configure a WordPress Theme

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.

In my last article, I showed you how to configure your website after installing WordPress. Today I will walking you through the “Appearance” section of the WordPress admin area and showing you how to make basic customisations to your website. This article is aimed at WordPress beginner’s, however intermediate WordPress users may also find it useful.

Installing Your Theme

After installing WordPress and configuring your website settings correctly, the next step is to set up your theme. In my opinion, it is always better to configure your WordPress theme before activating plugins on your website. You can then choose plugins that complement your theme.

In WordPress, all themes are controlled via the “Appearance” section. You will find this half way down the main navigation menu on the left hand side of the admin area.

Appearance Menu

Installing your theme is straightforward. Themes located within the official WordPress theme directory can be downloaded directly through the admin area. Simply click on the main themes page under appearance and then click on the “Install Themes” tab.

You can search the theme directory by keyword, colour, number of columns, features and more. If you are not sure what kind of theme you are looking for, I recommend clicking on the featured or newest theme links at the top of the page. This will bring up a wide range of popular designs. You can then preview any design you like and install it directly using the “Install Now” link.

Install Themes

Themes can also be uploaded in zip format using the upload link at the top of the page. 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/).

Upload a Theme

File Transfer Protocol remains my own preference 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 WordPress.

File Transfer Protocol

You can activate any theme that has been installed on your website in the manage themes section. Simply click on the activate link located under the theme thumbnail.

Please note that all screenshots displayed in this tutorial are from the popular Twenty Twelve WordPress theme. All WordPress themes offer different customisation options, however they all work in the same way. Therefore, the pages I will show you in this tutorial will be similar to the way your theme works.

Customize Your Theme

WordPress’s theme customization admin screen allows you to change the way your design looks. The majority of these options can be changed elsewhere in the appearance section, however many people prefer using the customizer as it allows you to see a live preview of those changes.

Preview Your Theme

As I am sure you are aware, 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 I changed my test blog name from Kevin Muldoon to WP Hub, the preview changed my header automatically. It is a great way to see how your title and tagline will look in your header.

Site Title and Tagline

Twenty Twelve allows you to change the header text and background colours using a colour wheel. Some WordPress themes are more advanced in this regard; allowing you to modify the colours of multiple areas across your design.

Colors

The customizer also allows you to add a header image.

Customize Header

A background image can also be uploaded and aligned.

Background Image

Menus can easily be changed through the navigation area. You simply need to assign the correct menu to the area you want it displayed. Some WordPress themes only have one menu area (e.g. the navigation menu at the top of the page_. Others offer several menu zones.

Navigation

Your front page display can be modified via “Reading Settings” in your main settings area. Again, the benefit of changing it through the customizer is that you can see a preview of the changes you have applied.

Static Front Page

The amount of control you have through the customizer depends on the theme you are using. Some designers have integrated all of their options into the theme customizer, whilst others prefer to use their own dedicated settings page. You will need to check the customize section of your own theme to see how much control the theme allows you.

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

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.

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.

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.

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.

Custom Header

If the uploaded image does not match the suggested size, WordPress allows you to crop the image to the correct dimensions.

Crop Header Image

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.

Custom Header

Background

A background image can be uploaded via the theme customizer or via the “Custom Background” page.

Custom Background

Images can be positioned to the left, centre or right. They can also be tiled and fixed to the background. A background colour can also be defined; which is useful if you do not repeat your background image.

Background Options

Theme 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 familiarise 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.

Theme Editor

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.

Overview

All WordPress themes are configured 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.

I hope you have found this basic tutorial on configuring a WordPress theme useful. Be sure to check out more great WordPress tutorials in our tutorials section.

This article was authored by:

Kevin Muldoon is a professional blogger with a love of travel. He writes regularly about topics such as WordPress, Blogging, Productivity, Internet Marketing and Social Media on his personal blog and and provides technical support at Rise Forums. He can also be found on Twitter: @KevinMuldoon and Google+.

Kevin Muldoon has authored 833 posts.Visit Website

Showing 3 Comments

  • Very nice post.

    REPLY
  • Tim

    Great overview, thanks for the detailed outline.

    REPLY
  • I want to insert my business logo in the header section. How do I do this? My logo is in PDF. When I select it for my header, it shows the logo on a page. How do I place the logo by itself and not on the PDF page?

    REPLY

Add Your Voice: