Why you need to install and use Firebug for Firefox when editing WordPress Themes

How Firebug for Firefox can help you edit and customize your WordPress theme

I receive many questions about how to change the styling of WordPress themes (such as font sizes, colors, and background images). Many people try to change the styles on their site by going to Appearance > Editor >  Stylesheet (style.css) but simply can’t figure out where the current styling is coming from. This is largely due to the fact that many themes use multiple stylesheets that are rather long and complex, so finding what you need to change can be like looking for a needle in a haystack.

Firebug, an add on for the Firefox browser, allows you to see exactly which style is applied to any element of your web page.  Firebug helps you zoom in on that needle in the haystack with a powerful microscope and pluck it out and do what you want with it.

While I primarily use Firebug  to find the CSS selector that is being used to define the property I want to change, Firebug can also be used to analyze your HTML, debug Javascript, and use many other development tools to facilitate your coding process.

Installing Firebug

To get started, open your Firefox web browser and visit this link: https://addons.mozilla.org/en-US/firefox/addon/firebug/

Click the “Add to Firefox” button. Click Allow to install Firebug.

Restart Firefox.

Finding the styles being used in your WordPress theme using Firebug

After you install Firebug, you simply need to right-mouse click (or Control click on Mac OS) on any part of your web page and choose Inspect Element with Firebug:

The bottom half of Firefox will display a panel with a view of the HTML source code of your site. The HTML source code is displayed in a hierarchy with arrows to expand and close nested HTML elements.

The CSS (Cascading Style Sheet) selectors and properties applied to the element display in the right side of the Firebug panel in the Style tab. If you hover over the blue stylesheet link, you will see the full URL to the stylesheet.

You may need to click the grey arrows in the HTML side of the Firebug panel to toggle open or closed various HTML elements to drill down to the nested HTML to find the style you would like to override. This can be a bit tedious. In the example above, the font-size  for the h1 tag is applied on line 42 of the theme’s stylesheet.

Editing your WordPress theme’s stylesheet

Once you know which selector (e.g. h1) contains the property (e.g. font-size 2.3em) you want to change, you can modify it using one of the following methods.

Option 1: Edit the stylesheet via FTP using a code editing application like Dreamweaver, Coda, or FileZilla

I would suggest this option only for the geeks in the room who have a of experience coding websites. Figuring out how to access your site via FTP and learning to use a code editing application are big learning curves. You would probably want to take a basic web development course. Boulder Digital Arts offers excellent web development classes in Boulder, Colorado, to get you pointed in the right direction, including Web Fundamentals, Introduction to HTML, Getting Started with Dreamweaver, and Understanding CSS. See below for online course resources.

Ideally, you should NOT edit the stylesheets in the theme you are using. This is because any changes you make will be lost when you update the theme, and you should definitely keep your theme updated. To avoid this problem, it is best practice to create or use a child theme. A child theme loads all of the functions, templates, and styles of a parent theme automatically and allows you to override all of these in the child theme, thus leaving the parent theme intact. When you update the parent theme, the changes you made in the child theme will not be effected.

If the property you want to change is in one of the parent theme’s stylesheets, copy the entire selector in the Style tab of Firebug and paste it into your child theme’s stylesheet. The child theme’s stylesheet ideally should be loading in such a way as to override the parent theme’s styles. Save and upload the new child theme’s stylesheet. If the property you want to change is already in the child theme’s stylesheet, you can simply go to the line number it is on as indicated in Firebug and make the change, save and upload.

Option 2: Add the selectors you want to change to a custom stylesheet using Jetpack

I recommend this option for novices and for users who don’t have a child theme for their theme set up and want to make some simple changes to their WordPress theme’s styling.

To quickly and easily create a custom stylesheet that will override all the theme’s styles, simply install the Jetpack plugin:

1. In your WordPress Dashboard, go to Plugins > Add New
2. Type Jetpack in the search window
3. Click Install Now
4. Activate
5. You will be prompted to login to your WordPress.com account. If you don’t have a WordPress.com account, you can sign up for one and then authenticate Jetpack.
6. After Jetpack is authenticated, go to your WordPress Dashboard and click on Jetpack.
7. Scroll down to Custom CSS and click the Configure button.
8. The CSS Stylesheet Editor will open.
9. Copy the selector you want to change in the Style tab of the Firebug panel into the CSS Stylesheet Editor, make the changes you want to make to the properties of the selector and click the Save Stylesheet button. Your new property should now override the parent theme’s style. Refresh Firefox and use Firebug go verify your change has been applied.

Jetpack Custom Stylesheet Editor

Jetpack Custom Styles as shown in Firebug

Firebug Documentation and Tutorials

Firebug Documentation: https://getfirebug.com/wiki/

Very quick overview of Firebug: https://getfirebug.com/video/Intro2FB.ogv

This tutorial is very helpful for you to see how to use Firebug to find your styles, but you’ll want to follow my instructions above for actually editing your styles in your child theme’s stylesheet or using the Jetpack Custom CSS:

A couple more good tutorials:

CSS Tutorials

• CSS Beginner Tutorial at HTML Dog
• Learn CSS step by step at CSS Tutorial.net