I have been using WordPress for about six years. Different themes, plugins, and code editors have come and gone through this huge learning process as I have developed hundreds of websites, but the one constant for me has been the Firefox add-on Firebug.
It’s the only tool that I have stuck with throughout those years because I have been able to learn so much with Firebug and build projects so much faster by using it.
If you have never used a web inspector like Firebug before, what it does is allow you to bridge the gap between the source code and the rendered out page in your browser. You can look at each bit of code interactively and see how it fits into the page, adjusting the code in the inspector and seeing the updates live in your browser.
This is as close as you can realistically get to a WYSIWYG experience like Dreamweaver when you are building something as complex as a WordPress theme.
Firebug Video Tutorial
In this Firebug screencast I talk about Firebug and other inspectors, show you how to use Firebug to inspect a site, tweak CSS, fix JavaScript bugs, and build faster sites. Watch the video below or read on for more info.
Other Browser Inspectors
I use Firebug because it was one of the first and best web inspectors, I know it well and I like the “feel” of the UI, but it isn’t the only inspector. Luckily all the major browsers finally have a web inspector built right in:
It doesn’t matter which one you use, they are all pretty similar. In practice you will end up using them all occasionally as you are testing sites in different browsers and fixing bugs. The important thing is that you pick one that you like, learn it well, and use it every day!
This was really helpful. I have been trying to learn how to work with WordPress to modify themes, and this looks like the answer.