How to Customise WordPress’ Appearance

I’ve seen quite a lot of questions recently asking how to change the appearance of a WordPress site.

Unless you’re using a premium theme, or a free theme that offers some site design controls, the answer is you’re going to need a bit of CSS.

And one absolutely wonderful tool: Firebug (which I wrote about here).

One of the more frustrating things about editing a design created by someone else is finding the correct CSS selector and property to change.

Firebug (a Firefox add-on) takes care of all that, so the first thing to do is install it. (In Firefox go to Tools>Add-ons and do a search for Firebug).

Steps to change the look of a WordPress site

With Firebug installed, here are the steps to change the way WordPress looks:

Step 1:

Make a note of the new CSS value you want to give to whatever you want to change.

If you want to change a font, make a note of the new font name. If you want to change a colour, make a note of the new colour hex code.

Step 2:

Navigate to your site in Firefox, fire up Firebug, click the ‘Inspect’ tool (second button from the left on the toolbar) and hold your mouse over the thing you want to change.

In the panel at the bottom, Firebug will highlight the name of the element you’re hovering over (it’s called a selector).

Make a note of its name, taking care to copy dashes (-) or underscores ( _ ) in the name correctly, and note whether it’s a class or a div.

If it’s a div it will be preceded by:

div id="name of your selector"

If it’s a class it will be:

class="name of your selector"

Step 3:

In your WordPress admin area, go to the Appearance>Editor screen:

… and, over on the right, click on the Stylesheet file (the filename will be style.css):

Select the entire file (ctrl+a), copy it, paste it into a text editor (not Word) and save it. This is your back up copy in case it all goes horribly wrong.

Step 4:

In the edit window, go through the file until you find the CSS selector you made a note of in step 2.

If the name of the selector you found with Firebug earlier was a div it will be preceded by a # sign in the editor window. If it was a class it will be preceded by a full-stop (period).

Step 5:

When you’ve found your selector (for example ‘main_content’) and property (e.g. ‘font-size’), change the value to the new value you made a note of in Step 1. For example:

#selector_name { property-name: new_value; }

Click the Update File button:

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

Important notes

If you need a beginner’s tutorial on CSS this one is great.

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

Making a change to WordPress this way assumes you do not have a premium theme or a theme that offers site design options in its control panel.

By following this process you’re editing your theme’s core stylesheet and that means that if your theme is updated your changes will be overwritten. You’ll need to make them again.

If you want to avoid having to re-do your changes each time your theme is upgraded you can create a child theme. This is a theme that uses your current theme as a template but enables you to change styling elements (like font size).

There’s a step-by-step tutorial on creating child themes here.

If you’re using a premium theme, or one with site design controls, use those. The way your premium theme is built means that your changes won’t be overwritten when the theme is upgraded.

Any questions let me know,

Cheers,