How to customise a WordPress theme and improve the look

This and the following section are both about WordPress themes and they are one of the most important sections of this guide. If a site is visually attractive, visitors will stick around longer and you’ll have a better chance of making money. Here we will learn how themes work.

The theme controls everything about the way a website looks and works. One click on a theme can totally transform your website, it is that powerful.

A theme defines the layout of the elements on the page, such as headings, menus, images, links, sidebars, headers, footers and so on. Everything you see is placed there by the theme.

A theme defines the text styles like the font and size for headings, sub-headings body text, image captions, links, and so on.

A theme can hide certain elements or expose them. It can define the order in which things appear and more.

Here we are building a test site to get to know WordPress and you can experiment with different themes and see how they work and how they change the site.

You can try a new theme every day and some will be great, but others will not be. A lot depends on the content on your website. A photographer’s website is very different to a writer’s.

Every WordPress website has a theme and, hopefully, you are using the same as mine – one called Twenty Sixteen.

Let’s see how to customise this theme. Once you know how to do this, you can apply the knowledge gained to any theme you install.

View your site

If you have been following this guide, here is what the website looks like right now.

It’s rubbish! It’s boring! It’s the worst site ever!

Let’s customise the theme and make it more exciting.

Appearance tools

Log into your website at yourname.wordpress.com/wp-admin

Click Appearance in the sidebar. Ignore the themes on the right for now and click Customize.

Customisation options

The page completely changes and there is a new sidebar on the left and a preview of the website on the right. You can experiment with the customisation features and instantly see how your website will look.

No changes are made until you click the Save & Publish button at the top, so you are free to experiment. Go to a different page on your website or click the cross in the top left corner and any changes you made are discarded.

This is a great feature in WordPress and it enables you to experiment with customisation options

Click Header Image.

Customise the header

A header is a large image that is displayed at the top of the home page. Many websites use a banner, image, company logo, branding, and so on. This is a brilliant way to customise your site and make it your own.

There are some suggested headers below and clicking one applies it. However, you will almost certainly want to create your own header instead of using a generic one.

Each theme has different requirements. This theme requires that a banner image is 1200 x 280 pixels and you need to create it in a paint program or photo editor and have it ready.

A different theme might use an image with completely different dimensions, so try to find out what is required.

Add a header image

Click Add new image.

Upload a header image

The Media Library opens and you can select an image by clicking a thumbnail. Click the Upload Files tab and drag an image from the computer and drop it on the browser window to upload a new image if there isn’t one in your library already.

Crop a header image

You can then crop the image if it is not the size that WordPress needs. If the image is the right size to begin with, it won’t need to be cropped.

Now you can see the header image in the sidebar and in the large preview window on the right. If you are happy with it, click Save & Publish. If you don’t like it, click Add new image and upload a different header image.

There is an interesting option in the sidebar just below the current header and you can upload several header images and have WordPress show one at random. This could be useful for displaying different messages, images, products or services.

Set the font

Click the back button at the top of the panel to return to the list of customisation options and click Fonts.

There are two font selectors and you can choose the font for headings and for the body text in articles.

Click the font box and then select one in the list. See how it looks in the preview on the right. If you don’t like it, try a different font. Click Save & Publish when you are happy or click the cross in the top left corner to forget all changes.

Explore all the other customisation features and tweak the look of your website. Some themes have just a few customisation options, but some have a lot.

Set featured images for posts

Maybe this section should go with ‘Creating a post’, but like themes, it is a feature designed to make your website look good, so maybe it should be here. Different themes use different featured images in different ways, so the two are linked.

Many themes use featured images and this is a large image that is associated with a post or page. One does not have to be set, but it can make a huge improvement to the look of your website’s home page.

If your theme uses featured images, and the Twenty Sixteen theme used here does. Here is how to set it.

Set a featured image

Click Posts in the sidebar, let the mouse hover over an article and then click Edit.

At the bottom of the panel on the right is Featured Image. Click Set featured image.

The media library is displayed and you can choose an image. As with header images, a theme may work best if the featured image is a specific size. Try to find out what that size is.

If you cannot find the optimum size, make it large, such as 1000 x 500 pixels.

A featured image can be replaced or removed with the link below. Click the Update button in the top right panel to save the changes to the post or page.

See the difference

Remember that screenshot from the start? It showed an awfully boring website. Here is how it looks now with some customisation tweaks and a featured image on the articles.

It makes the website look so much better. It has a header image at the top, the articles have featured images, a brief description and a Continue reading link. It looks great.

However, there is a way to make it even more visually exciting and that is by selecting a new theme. That is the topic of the next article and the changes made are even more radical!