Using the Chrome Developer Tools to Edit a WordPress Theme

I get a lot of questions in the WordPress forums about how to edit or change small parts of a theme’s design. If you use the Chrome developer tools (or something like Firebug for Firefox), it makes really easy to track down those styles and know what to change.

Here’s a quick video showing how it works:

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

8 Responses

  1. Markus

    Just to want to let you know:
    There is a very similar tool in the Opera Browser (where Chrome probably copied it from ;-)
    It is (on Windows) under: Opera -> Page -> Developer tools -> Opera Dragonfly
    (or CTRL + Shift + I)
    Thanks for the nice Video!

  2. Developer Tools had a steeper learning curve than Firebug in my opinion, but now I would never go back. Aside from Chrome being hands down my browser of choice, Developer Tools has less fluff and more of the meat.

  3. Sweetness itself!
    Thanks Devin for this post. Very helpful.
    I’m ‘dangerously (in)competent’ – ie I know enough to get into trouble…
    Love Portfolio + (had been using Thesis 1.8.5)

Leave a Reply