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:

Published by

Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

7 thoughts on “Using the Chrome Developer Tools to Edit a WordPress Theme”

  1. 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

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>