Use Firebug to Modify WordPress Theme CSS

Firebug has many uses for a web developer. This tutorial is for the novice WordPress user who just wants to pinpoint the theme element and the CSS codes so they could edit the design. Firebug is available for both Firefox and Chrome. If you use Chrome it would be best if you use its dedicated Web Developer tool (Ctrl + Shift + i ). This works the same way as Firebug. If you use Firefox, go to Firebug website and click install.

The good thing about Web Developer tools like Firebug is that changing the CSS properties on the window also temporarily changes the elements appearance on the website in real time. This enables you to see exactly how the design would appear even

Simple CSS – Changing Text Color

Look at the sample image below. Let’s say we want to change the color of the text on the header part that says “Just another WordPress site”.

Change CSS on WordPress Theme
Click image to expand.

Activate Firebug by clicking its icon on your browser’s toolbar. On the Firebug window, click on the Inspect Element tool as seen on the image below. Finally, click on the HTML element that you want to inspect. This means clicking on the “Just another WordPress site” text.

Change Text Color with CSS
Click image to expand.

The Firebug window highlights the element you just clicked. On the sample image below we see that the element <h4 id=”site-description”> is selected. On the right side of the Firebug window, we see the CSS codes that affect our selected element.

Firebug for WordPress Themes
Click image to expand.

On the example above we see the CSS codes that dictate the color of our target text. We have to edit the color attribute then add our modified code on our child-theme’s style.css or on any Custom CSS option. To change the color to Red we use the code below.

#site-description {
    color: #FF0000;

Another Sample

See if you can solve this one. The image below shows the Firebug window after selecting a theme’s widget title using the inspect element tool.

Analyze the CSS code on the image then try to solve these:
1. What code do we use to change the widget title’s background color to black?
2. What if we want to change the widget title’s font to Georgia?

Change Widget Background Color
Click image to expand.

Solution 1

.widget-title {
    background-color: #000000;

Solution 2

.widget-title {
    font-family: Georgia, Serif;

If you’re not that familiar with CSS and you’re having a hard time figuring out what to do, it might be a good idea to read a quick tutorial on the basics of CSS to get you started.

Share This Post


Add a Comment
  1. Thank you!

    I keep reading these how to do its about css, for some reason today a light went off. What you are showing actually makes sense.

    Would love to learn to use Firebug (host gator helped me make some corrections on a site and said that is what they used and I could use it also..think they were very optimistic!).

    They didn’t explain that changes are just temporary, like a virtual server ? so changes I put in would just show how it would change and if acceptable must go into css file and make the actual change. I thought that if I did anything right or wrong it would be permanent! Hope I got this right?


    1. Yes, that is correct. Once you’re satisfied with a certain change then you have to copy the modified CSS code from Firebug into your site’s style.css file.

Leave a Reply

Please write your comments in english. I delete anything that even remotely resembles spam.

Note: When posting code, enclose it in pre and code tags.
e.g. Add code here