• Using Inspect Element or Firebug to peek behind the scenes of your WordPress website

    Inspect Element

    Have you ever been frustrated by the way something appears on your website? Perhaps you thought some text was going to be green, but it actually looks red. Or perhaps you formatted text to be aligned to the left, but it’s actually centred. Maybe an image has an ugly-coloured border around it that you didn’t intend.

    Code

    Websites are made up of files. Sometimes, a lot of files. And those files are filled with code. Sometimes, a lot of code. And if you don’t know what the code means, it can be really difficult to understand why sometimes things just don’t look right on your website.

    Without knowing exactly how your browser is getting the information to display a website, it’s impossible to know how to fix the way it appears. That’s where Inspect Element (or Firebug) comes in.

    Webkit browsers, such as Apple’s Safari and Google’s Chrome, have built-in “developer mode” tools that are very useful for inspecting the different elements making up your site. For Firefox, there’s a free add-on called Firebug which will do essentially the same thing. A simple right-click on the page item you want to check reveals much about that item’s formatting, allowing you to troubleshoot problems.

    I made this video to walk you through the steps of using Inspect Element or Firebug to see behind the scenes of your website. See below the video for some step-by-step instructions.

    Instructions:

    1. If using Safari, go to Safari>Preferences>Advanced then check the “Show Develop menu in menu bar” checkbox. If using Firefox, download and install the Firebug plugin.
    2. Right-click on the element you want to inspect, and choose “Inspect Element” from the menu.
    3. A new pane will open at the bottom of the browser window, showing the page’s HTML code (on the left-hand side) and relevant CSS code (on the right-hand side).
    Choose any HTML tag, then make changes to the CSS code to preview the changes you want to make.
    If you choose, you can then apply these changes to your stylesheet.

    I hope you found this tutorial useful. Please leave a comment or get in touch with me if you’d like to know more.

    – Tessa

    Post By Tessa (18 Posts)

    Tessa is passionate about designing for and teaching WordPress! She also has a background in performance, video, design, photography and writing. She lives in San Francisco with her husband, baby boy and cat.

    Tessa recently launched a new website, WP SuperGeek: Your fearless WordPress help desk. WP SuperGeek offers courses, advice, and a forum to ask questions. They speak geek so you don't have to!

    Website: → WP SuperGeek

    Connect

If you like it, please share it!

Join in! There's already been 5 comments

  1. Birgitte Nielsen January 14, 2012 @ 12:48 pm

    I really found this useful, I’m a novice and this is quite clear on my webpage which I am in the process of setting up. Thanks a million for these tips. I am sure it will improve my site no end.

    B.

    • Serena Star Leonard January 19, 2012 @ 4:15 am

      Thanks for stopping by Birgitte, good luck with your website and fell free to ask any questions you have on our Facebook page: http://www.facebook.com/GrassrootsInternetStrategy

    • Tessa January 19, 2012 @ 5:03 am

      Thanks for your kind words, Birgitte! Good luck with your website and like Serena says, let us know if we can help. 🙂

  2. Anthony El Khoury February 13, 2013 @ 12:10 am

    Dear Tessa..
    I have my own website which I am editing using Joomla 2.5
    I am using Firebug in order to see the HTML/CSS code of the page.
    But The problem is how can I locate the HTML file on the server in order to be able to change it ?
    (I am the administrator of the page)
    Thanks a lot…I would be thankful for your reply and help..
    regards

    • Tessa Needham February 13, 2013 @ 8:49 am

      Hi Anthony,

      I’m sorry but I don’t know Joomla at all. In the case of WordPress, it depends on which part of the HTML you’re trying to change. It may be inside a page template, or in the editable area of the page or post itself.

      What part of the HTML are you trying to change? Which tags?

      Tessa