WordPress Using Firebug

Written by Admin | Hits: 2615

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.

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

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.

Find out more

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!