Use Firebug for Editing WordPress Themes

firebug

It can be difficult to edit WordPress templates. Many have a lot of CSS files, which makes it difficult to test and to make changes.

UPDATE: Firebug is not supported anymore. Please try Dev Tools in Firefox, or Developer Tools in Chrome instead.

We recommend that you use Firefox to help you edit WordPress themes.

Firefox is a great browser but also a great tool for working with themes. Firebug is an add-on for Firefox that gives you two really important powers:

  • You can test template design changes before you make them.
  • You can quickly track down the exact file and line number where you need to make changes.

In this tutorial, we’re going to show you how to use Firebug. We’re going to edit the site title in the default WordPress Twenty Eleven theme.

Step 1: Install Firebug

Firebug was originally made to work with Firefox. If you don’t have Firefox, you can get Firebug Lite that works in Chrome or Internet Explorer.

Follow these links to install Firebug:

Step 2: Accessing Firebug

  • Once Firebug is installed there will be a Firebug icon in your toolbar. Next to it will be a down arrow which contains a more extensive menu.
  • Activate Firebug by clicking the Firebug icon.
tutuploadsmedia_1337985595716.png
  • Highlight or place your mouse over the element you want to inspect. In this case we’re selecting the site name in the theme. In the image below, the site name is “WP Menu Example”.
  • Right Click.
  • Choose Inspect Element with Firebug.
tutuploadsmedia_1337985713694.png

Step 3: Understanding the Default Firebug Viewing Windows

Now that you have activated Firebug, there are four things that you’ll need to pay attention to. You can see them highlighted in the image below:

  1. The element you want to find out more about.
  2. The HTML code for the element you’re inspecting.
  3. The CSS code for the element you’re inspecting.
  4. A link to the file that contains the CSS code.
tutuploadsmedia_1337985920759.png

Step 4: Using the Firebug Windows

  • Open a site to inspect and highlight, then inspect, an element.
  • When I highlighted the site title in the browser window and clicked “Inspect Element with Firebug”, the HTML window shows exactly what I picked and highlights it in blue.
  • If you want a little more information or to inspect slightly different section of the webpage, go to the window on the lower left and mouse over the lines of code. You’ll see that different highlights appear in the browser window.
  • In the image below I’ve placed the mouse over the h1 tag that has the id=site-title. It’s above the code I chose to inspect originally. I can see a graphic representation of that styling in the browser. The different colors show different aspects of the code. The blue shows the element, and the purple shows the spacing that is defined as part of the id=site-title. You can’t see this unless you mouse over the correct part of the HTML window.
tutuploadsmedia_1337987487207.png

Step 5: Making Temporary Changes to Test Your CSS

Here you can see the HTML on the left, and the CSS code on the right. The CSS shows the padding to be 3.6625em. Now we can use Firebug to test out different CSS settings. We’ll experiment with the padding.

  • Move your cursor over to the space next to padding, a gray circle will appear.
  • Click it.
  • It will change to a red “no” circle”
  • You will now be able to change the CSS directly here on the page, and you will be able to see the changes live on the site
  • Note: this is perfectly safe because you will NOT be actually changing the CSS file permanently. After you have made a change, you will be able to remove the change by refreshing the page.
tutuploadsmedia_1337987812264.png

Step 7: Turn Off a Definition

  • The red circle indicates the padding is “turned off” and you can see what the webpage will look like in the browser window. The padding has been completely eliminated. Clicking refresh on the browser will put it back to normal.
  • Click it now to bring it back and we’ll show you how to experiment with different heights.
tutuploadsmedia_1337988274753.png

Step 8: Modify or Add a Definition

  • Put the mouse over the CSS code, and click. It will open up a miniature editing window.
  • Type in 10px, 10px, 10px, 10px.
tutuploadsmedia_1337988765002.png
  • Type in 1.66628em and remove the two 0’s.
  • As you type the changes you will see the padding change in the browser immediately.
  • You have temporarily redefined the padding. By removing the two 0″s you put equal space around the element of 1.6 em.
  • Mousing over the html on the right, shows you a graphic representation of your changes.
  • You an also add another parameter to the class by pressing return, or double clicking the space under padding.
tutuploadsmedia_1337989131824.png

Step 9: Finding the Right Definition to Modify

  • Type in font-size and press tab to move to the next step. This is just to illustrate how Firebug works and that you can add parameters. It also demonstrates a frustration that most beginners run into. You will be able to enter the font size here, but it isn’t going to change the font size on header. The reason is because of a CSS principle called inheritance.
  • To solve this problem we just need to go to the HTML window and move the cursor down a level on the HTML.
tutuploadsmedia_1337989481019.png
  • Move the cursor in the HTML window to the span tag below the H1 tag.
  • You’ll see the Style window change to reflect the style of the span.
  • Change the size of the text here. You will see the font size of the header text change.
  • Firebug is a very valuable and handy tool for searching out the source of your website, but a good understanding of CSS is big help as well. If you don’t get the results you want, keep looking and trying.
  • This is how you make temporary changes. Once you’ve tested everything out, you probably want to make permanent changes to your css files. Here’s how you locate the file you need to change.
tutuploadsmedia_1337989765195.png

Step 10: Finding the CSS to Make Permanent Changes

  • Go to the Style window.
  • Look to the right and find the style sheet name and the line in the stylesheet that will have this code.
  • The Style window will show you all the style sheets that have control over this element in any way. Scrolling down the window you’ll see more than one location and, usually, more than one stylesheet.
  • Put your mouse on the name of the stylesheet and right click for the context menu.
  • Click open in new window or new tab.
tutuploadsmedia_1337992385206.png
  • You can copy the location to your clipboard or open it in a new tab or window.
tutuploadsmedia_1337992601889.png
  • Here I’ve opened the location a new tab.
  • You can see the complete URL to the stylesheet I need to edit.
  • Now I can find this on my server, open it with a script editor and make the changes.
  • First save a copy of your original stylesheet, in case you have to revert or make a mistake.
  • Make your changes with the script editor and save the script back to its correct location and the changes will be made.
tutuploadsmedia_1337992642137.png
For a video tutorial and overview of Firebug, you can watch this video on their documentation wiki.

Author

0 0 votes
Article Rating
Subscribe
Notify of
4 Comments
Oldest
Newest
Inline Feedbacks
View all comments
shine
shine
10 years ago

very good tutorial. thank you so much.

Hammer on Ambos
Hammer on Ambos
8 years ago

Thank you very much, your tone is so cool and makes learning this stuff sound like fun.

steve
steve
8 years ago

@hammerambos Thanks!

4
0
Would love your thoughts, please comment.x
()
x