How to Customise WordPress’ Appearance

by Martin Malden

WordPress and Firebug. 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:

Editor link.

The Theme Editor link in WordPress Admin

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

Your Style sheet file.

Your style sheet file

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:

Update File Button.

How to save your changes

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,

Martin Malden

Please share this article - I'm counting on you!
       
Found this article useful? Get free updates!

Get regular updates, plus a free eBook on how to set up a business online - join us!

Your details are safe with me.
My Privacy Policy.
Shailender January 11, 2011 at 4:41 pm

This information is useful for me too as I don’t have premium wordpress theme. Now I’ll try your advice to customize the wordpress appearance.

Martin January 11, 2011 at 4:59 pm

Excellent..! Let me know if you need any clarifications,

Cheers,

Martin.

marvin January 12, 2011 at 8:08 am

I also don’t have a premium theme. But I do a lot of modifications on the template I am using. And the more I do template modification, the more I learn (my current theme isn’t good for my eyes and will be doing a lot of modification this week)..

ricky February 8, 2011 at 12:53 am

I have just discovered Wordpress after hearing so much about it and after I gave in to my stubborness! I absolutely love it and I am continually amazed at just how much you can do!

Martin February 8, 2011 at 7:43 am

Hi Ricky,

Welcome to the world of WordPress..!

Yes – it’s a great platform and one that keeps developing and improving – enjoy :)

Cheers,

Martin.

Comments on this entry are closed.

Previous post:

Next post: