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'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. gregg wrote:

    Thanks, Devin. Very helpful video. Especially good screen composition and narration.

  2. Markus wrote:

    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!

  3. Pingback: Making the Transition from HTML to WordPress. Where do you Begin? - WP Realm

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

  5. Dave wrote:

    Thanks for this Devin, I only use Chrome as well now so this will definitely come in very handy.

  6. Andrew wrote:

    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>