How to Customise a WordPress Theme

The most basic way of changing the appearance of a WordPress website is to change the theme.

However, even when you change the theme you may still want to customise the appearance.

WordPress has a screen under the Appearance menu item called Customise

Accessing that screen will give you a range of options that you can select and that will enable you to tailor your theme to your requirements, but within limits.

A few examples include being able to change the fonts and colours, adding your own logo, controlling menu items, controlling widgets, and, depending on the functions offered by the theme itself, defining templates – e.g. whether or not to use sidebars.

However, you may want to customise things even further, so that’s what I’ll cover here.

More extensive customisations

At the bottom of the Appearance > Customise screen there is a Custom CSS section. This is where you can edit the theme’s stylesheet almost infinitely.

The most frustrating thing about editing the CSS in a theme, though, is finding the correct CSS selector to edit.

I’ve written a separate post on how to do that – see how to locate the correct CSS selector.

When you’ve found the selector you want to change you can simply copy it and paste it into the Custom CSS window (at the bottom of the options on the Customise screen) and type in the new property and value.

Any entries in the Custom CSS window will be placed in a separate stylesheet that loads after the theme’s main stylesheet. This ensures that the style changes over-ride the original values and are retained through theme upgrades.

Detailed steps to change the CSS in your theme

Using the Inspect tool, here are the steps to change the CSS:

Step 1:

Navigate to your site in Firefox or Chrome, right-click and select the ‘Inspect’ tool (‘Inspect element’ in Chrome) and click on the thing you want to change.

I’ve clicked on the heading ‘Mactan Island and Lapu Lapu’, which is an h2 in the image below. The relevant CSS code will appear in the window to the right:

You can edit the property and value within the Inspect tool – e.g. change the font size in the image above from 33px to something else (just click on the 33px and type something else).

This is a good idea because it enables you to make sure you’re editing the correct selector but, of course, it doesn’t make core edits. It’s like a preview.

Copy the selector (click on it – the .grt h2 in the image above – and copy the highlighted text).

Step 2:

In your WordPress admin area, go to the Appearance > Customise screen and click the Custom CSS tab at the bottom:

Paste in the selector, property and value from the ‘Inspect’ tool and click ‘Publish’ (at the top)

Step 3:

Check out your site to make sure the changes look OK – if they do you’re all done.

Important notes

Make only one change at a time so you know what to undo if it goes wrong.

By following this process you’re not editing your theme’s core stylesheet. That means that your changes will be preserved when the theme is updated.

Cheers,

Martin Malden
Owner – WealthyDragon