Customizing Your WordPress Theme Using Firebug

Over the next few weeks I’m going to take a look at some of the ways that you can use Firebug with WordPress. If you haven’t heard of Firebug, where have you been? It’s time for to come out from under that big old rock you’ve been hiding under and get it installed.

Firebug is a Firefox extension and in-browser development tool . The idea of a development tool should not put you off. This is not a tool just for developers, Firebug can be used by anyone, and if you’re a person using WordPress it should be an essential part of your toolkit. Here’s why:

  • Edit CSS in-browser to check out design changes without editing your theme’s files
  • Attach CSS classes to HTML
  • Run Javascript on your site before inserting in your theme
  • Debug javascript
  • Troubleshoot problems on your site

Today I’m going to look at how you can customize a WordPress theme using Firebug. The great thing about this is that you can check out your changes in your browser without editing your site at all. Only you can see what you’re up to so it doesn’t matter if you make mistakes in Firebug. Just refresh the page and breath easily again.

I’m going to show you how to make some basic customizations to the WordPress Twenty Eleven Theme using Firebug. The same principles are applicable for any WordPress theme.

Tip: If you prefer Chrome to Firefox you can use Chromes built-in developer tools which work just like Firebug.

Stop! Children Mandatory

We always recommend creating a child theme to make changes to your theme. This is particularly important when customizing Twenty Eleven which is updated whenever you update WordPress. If you edit the theme files directly then any changes you make will be overwritten by the updated files. You will not be happy about that.

Making a child theme is really easy. This isn’t a tutorial about making a child theme so I’m not going to go into loads of details, but here’s how to do it in a few simple steps:

  1. In your /wp-content/themes/ folder create a new folder and give it a name /mychildtheme/
  2. In your favorite text editor create a file called style.css
  3. Add this header information, filling it in with your own details:
/*
Theme Name:     Twenty Eleven Child
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Eleven theme
Author:         Your name here
Author URI:     http: //example.com/about/
Template:       twentyeleven
Version:        0.1.0
*/
  1. Add a line to import the styles from Twenty Eleven:
@import url("../twentyeleven/style.css");
    Upload your style.css to your child theme folder.

Done!

Let’s get customizing!

Here’s what our final theme is going to look like.

The final theme with courier fonts, black background, green links and reduce spacing on the header

 

 

As you can see, I’ve taken some inspiration from classic games such as Space Invaders. The child theme has only very basic customizations. The more you learn to use Firebug the more complex your customizations can get.

1) Install Firebug

You can install Firebug by going here and downloading the latest version.

click on the download icon to install firebug

Now you’ve got Firebug installed there are four things we are going to do:

  • Change background color
  • Adjust spacing
  • Change fonts
  • Change link colors

2) Change the background color

Firebug is great for getting information about your theme or website. For this tutorial we’re really concentrating on information about CSS and HTML but you can also use it for Javascript, load times and other good stuff.

To inspect an element right click on it and click “Inspect Element” – we’ll start off by inspecting the background:

right click on the webpage background and click "inspect" element

You’ll see a panel with lots of info pop up at the bottom. On the left hand side is your HTML, and the right contains the CSS that is applied to the element you have selected. You can also quickly see exactly where the style is located.

HTML is on the left, CSS on the right.

 

We want to edit the website’s background color. Look at the right hand side of the firebug screen and you’ll see “body” right at the top with a hex value. If you hover over that hex value you’ll be able to see what that color is:

hover over the hex value to reveal the color

We want to replace this with black. Double click on the hex value:

double click the value

You can see that we are now able to edit it:

edit the hex value

Change the hex value to #000 and watch the background color change before your very eyes!

the background color has been changed to black

If you aren’t happy with any changes just refresh the page and they will disappear.

Now that you are happy with your new background color you should copy the style into your child theme’s style.css. Open this with your favorite text editor or in the WordPress admin area under Appearance > Editor

Copy the .body style and paste it into your style.css:

copy the css from the firebug panel into your style.css

Save your file and this time when you refresh your page it will show your updated style.

Congratulations! You’ve just made your first theme customization using Firebug!

3) Adjust the Spacing

Now we want to adjust the spacing on the header bar which at the minute is just too wide.

There is too much spacing around the site title

To easily find out which element we want to edit click on the Inspect Button.

the inspect button is located at the far left hand side of the Firebug panel, to the right of the firebug icon

This lets you roll your mouse around your theme, taking a look at how the different elements are laid out. You can see that the site title area has got a lot of padding around it:

hover over elements

Click on it and check it out in the Firebug panel:

there is too much padding here, we need to reduce it

I want to bring this all the way down to 10px. Like you did with the background color, double click on the property and adjust it:

the padding around the site title has been reduced

Tip: When adjusting the spacing you’ll often see something link 2px 1px 5px 0px. This is applied to your spacing in this order: top right bottom left. The same is true for margins and padding

If you’re happy with it, copy the code into your style.css underneath the background color style we have already added:

paste the style into style.css

Now we’ve adjusted the spacing at the top we need to balance it out with the spacing at the bottom of the header info:

there is too much padding under the site title

This time right click on the site description:

right click on the site description and select inspect element

In the Firebug panel you’ll see that this element has quite a lot of margin spacing.

the margins are too wide

Reduce the bottom margin to 10px:

the site description margin has been reduced

If you’re happy with it, copy the site-description style to your style.css file.

The more astute of you will have noticed that all of these adjustments to the spacing have messed up the positioning of the search box:

the search box is no longer aligned correctly

When you’re editing with Firebug, or doing any CSS editing at all, you should always check to see what effects your changes are having on other elements.

Right click on the search box and look for a property relating to spacing. You’ll soon discover that the element you want to edit isn’t there. When you are editing your CSS you’ll find that the CSS you want to edit is contained in another HTML element above it. You can locate this by looking at the left hand side of the editing panel.

We can find the correct element by looking above the html for the search box

Click on form id and you’ll see the CSS you need on the right panel:

the search box spcing needs to be adjusted

Double click on the “top” property and reduce it to 30px.

the search box has been repositioned

Your search box is now in a much better position!

Copy and paste the #branding #searchform CSS into your child theme’s style.css.

4) Change the Fonts

Helvetica Neue is all very good, but if we’re going to get really retro on this child theme it’s far too snazzy. It’s time to get jiggy with some Courier.

Right click any piece of text and select “inspect element

right click a piece of text and click inspect element

Scroll down until you find .body where you’ll see Helvetica Neue.

we want to change helvetica neue to courier

Double click it and change to “Courier”. You’ll see the changes live on your page. Retro!

the font is now changed to courier

Copy the .body styles to your style.css.

5) Change the Link Colors

At the minute our links are blue but I want to make them a nice luminous green to fit in with our retro theme. You should be getting the hang of things now. As we’ve seen, every step comprises of:

a) Edit in browser
b) Copy styles to style.css

Let’s change our link colors. Right click on any link

right click and select inspect element

Scroll down until you find the a element.

make the links green

Change the color to #01FF00. Watch the links change color!

all links are now green

I also want to change the hover color on the site title link, which at the minute is blue.

site title with blue hover

Right click on your site title and you’ll see the this style #site-title a:hover, #site-title a:focus, #site-title a:active

Change the color to #01FF00:

hover color changed to green

Your child theme is now ready! Now all you’ve got to do as add a beautiful space invaders banner in Appearance > Header and it’s like you’ve stepped back in time by a whole 30 years!

Here’s all of the CSS that I added to my child theme:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*background color*/

body {
background: none repeat scroll 0 0 #000000;
}

/*spacing*/
#site-title {
margin-right: 270px;
padding: 10px 0 0;
}

#site-description {
color: #7A7A7A;
font-size: 14px;
margin: 0 270px 10px 0;
}

#branding #searchform {
position: absolute;
right: 7.6%;
text-align: right;
top: 2em;
}

/*fonts*/
body, input, textarea {
color: #373737;
font: 300 15px/1.625 Courier,Helvetica,Arial,sans-serif;
}

/*link colors*/
a {
color: #01FF00;
text-decoration: none;
}

#site-title a:hover, #site-title a:focus, #site-title a:active {
color: #01FF00;
}

Now go forth and create child themes with WordPress and Firebug. And sometime soon I’ll get to telling you all about how to troubleshoot WordPress using Firebug.

(header image CC license JR Guillaumin – thanks!)