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
*/

4. 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.

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.

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:

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.

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:

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

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

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

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:

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.

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

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:

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

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:

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:

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:

This time right click on the site description:

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

Reduce the bottom margin to 10px:

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:

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.

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

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

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”

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

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

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

Scroll down until you find the a element.

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

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

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:

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:

/*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!)