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

Comments (15)

  1. Great info for beginners. I have been doing this for a while now, and kind of wish there was a way to make changes or update your CSS. It’s hard to keep track of all the changes you have made editing/testing styles this way.

  2. @Ryan

    Along side using firebug during my development, I tend to use a test styles bookmarklet to keep my styles temporarily saved until I’m ready to apply them to the live site.

    Then it’s just a simple copy and paste, but I gotta warn ya that in order to present css images in your style (if you do), you must include the full path to the image, including the http:.

    Works for Firefox and Chrome and Opera. Hope that helps ya.
    https://www.squarefree.com/bookmarklets/webdevel.html#test_styles

  3. Hello, I an a newbie in wordpress and do you know what, I enjoyed your tutorial. The humour have made everything improtant thing funny and easier to learn. Thanks very much. Please is there any way you can help me to add additional sidebar on my buddypress theme or is there someone else here that might help. Having been googling this problem but all proves futile. The best I can do is to see the new sidebar appear in my WordPress Widgets areas but it does not appear on my theme. Thanks for the firebug once again…

  4. Wow my eyes are now open to many new possibilities with your article. I use Google Chrome and have “inspected element” many times but have been scared to death to touch anything in it for fear I would mess something up and not be able to fix it.

    So what your saying is that I can use “inspect element” to play around as much as I want and just refreshing it will reset it and not jack anything up?

    I am a novice website builder (2 sites so far)but I have learned a lot and I will definitely use the information in your article. Thanks!

  5. Thanks for the tutorial!

    My in-beta-soon text editor (http://liveditor.com) has a Firebug-like UI for tweaking css and html lively, I’m researching how it fits in this area.

    With LIVEditor you can customize css for WordPress without having to save the changes manually.

  6. OK, good tutorial; thank you. (c:

    My problem is with “package” and “subpackage”.

    /**
    * Contains a list of all custom action hooks and corresponding functions defined for abc.
    * This file is included in functions.php
    *
    * @package theme-name
    * @subpackage Functions
    */

    This is not a child theme of twenty ten, my own.
    There is a folder in the theme-name folder: functions. My child theme is in another folder. I’ve saved the functions.php file to my child theme folder.
    Nothing happens (changing the content) either when I change the subpackage my folder name or leave the “Functions” word there.
    What should I be putting in the above?
    thank you so much for the help.
    Cheers,

  7. Siobhan, [which imho is one of the loveliest Irish names], I’m kind of new to css and firebug and have at best a passive knowledge of how to use it. That having been said, I curate a lot of images using press this. Is there some css I could add to twenty eleven that would tell my images to automatically fill the entire width of the post? Thanks in advance…

  8. i found this tutorial very useful.. firebug is a great tool for developers it helps the developers to do any experiment in style, in validation and all the things. Thanks

  9. Hello Siobhan. Thank you for your article. It’s related to a problem I’ve been unable to solve and I’m hoping you can help me. I’ve been working on a WP website using the premium theme Thethe Photographer from Thethe Fly. I’ve been unable to create a working child theme for it using the method you described. The method works for Twenty Eleven and for Twenty Twelve, but there is a problem with Thethe Photographer. The problem seems to be that it already looks like a child theme, in that its style.css file consists only of some header information followed by the import line:
    @import url(“style/style.css.php”);
    I know almost nothing about coding. Can you suggest what I should try to create a child theme? And if it’s not possible to create a child theme, is there a way I can use Firebug in the same way you describe, but to make the changes directly to the (parent) theme? Thank you for any help you can offer.

Participate