Beginner's Guide for WordPress / Start your WordPress Blog in minutes

Basics of Inspect Element: Customizing WordPress for DIY Users

Have you ever wanted to temporarily edit a webpage to see how it would look with specific styling?

It’s possible to edit text, colors, and more with a tool already in your browser called Inspect or Inspect Element. This is a dream come true for all DIY users when they find out about it.

In this article, we will show you the basics of Inspect Element and how to use it with your WordPress site.

WordPress beginner's guide to using Inspect tool in Google Chrome

What is Inspect Element or Developer Tools?

Modern web browsers like Google Chrome and Mozilla Firefox have built-in tools that allow web developers to debug errors.

These tools show a page’s HTML, CSS, and JavaScript code and how the browser executes the code.

Using the Inspect Element tool, you can edit HTML, CSS, or JavaSCript code for any webpage and see your changes live (only on your computer).

For a DIY website owner, these tools can help you preview how a site design would look without making the changes for everyone.

For writers, these tools are fantastic because you can easily change personal identifying information when taking your screenshots, eliminating the need to blur out items altogether.

For support agents, it’s a great way to identify the error that could be causing your galleries to not load or your sliders to not work correctly.

We’re just scratching the surface of use cases. The inspect element is really powerful.

In this article, we will be focusing on Inspect Element in Google Chrome because that’s our browser of choice. Firefox has its own developer tools, which can also be invoked by selecting inspect element from the browser menu.

Ready? Let’s get started.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Launching Inspect Element and Locating The Code

You can launch the inspect element tool by pressing CTRL + Shift + I keys on your keyboard. Alternatively, you can click anywhere on a web page and select inspect element from the browser menu.

Inspect menu

Your browser window will split into two, and the lower window will show the web page’s source code.

The developer tool window is further divided into two windows. On your left, you will see the HTML code for the page. On the right-hand pane, you will see the CSS rules.

HTML and CSS Panes in Inspect window

As you move your mouse over the HTML source, you will see the affected area highlighted on the web page.

You will also notice CSS rules change to show the CSS for the element you are viewing.

Editing a particular HTML element

You can also take the mouse pointer to an element on the web page, right-click, and select inspect element. The element you pointed at will be highlighted in the source code.

Editing and Debugging Code in Inspect Element

Both the HTML and CSS in the inspect element window are editable. You can double-click anywhere in the HTML source code and edit the code as you like.

Editing HTML code in inspect element tool

You can also double-click and edit any attributes and styles in the CSS pane.

To add a custom style rule, click on the + icon at the top of the CSS pane.

Editing CSS in the inspect element tool

As you make changes to the CSS or HTML those changes will be reflected in the browser instantly.

These changes will be saved in your browser’s temporary memory and won’t affect your website.

Live CSS changes in the browser screen

Note, that any changes you make here are not saved anywhere. Inspect element is a debugging tool, and it does not write your changes back to the files on your server. This means that if you refresh the page, all your changes will be gone.

To actually make the changes, you will have to edit your WordPress theme’s stylesheet or relevant template to add the changes you want to save.

Before you start editing your existing WordPress theme using the Inspect Element tool, make sure that you save all your changes by creating a child theme.

Easily Find Errors On Your Site

The inspect element has an area called Console, which shows all the errors that exist on your website. When trying to debug an error or requesting support from plugin authors, it’s always helpful to look here to see what the errors are.

Browser Console Error

For example, if you were an OptinMonster customer wondering why your optin is not loading, then you can easily find the problem “Your page slug does not match.”

If your share bar wasn’t working properly, then you can see that there’s a JavaScript error.

Tools like the Inspect Element Console and SupportAlly help you get better customer support because the technical support team loves customers who take the initiative in providing detailed feedback on the issue.

We hope this article helped you learn the basics of the Inspect Element and how to use it with your WordPress site. You may also want to take a look at the default WordPress generated CSS cheat sheet to speed up your theme development skills.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

18 CommentsLeave a Reply

  1. Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. hey!
    I can’t change my heading font size in mobile version.
    For example,
    Heading font size in desktop is 24px
    but it is also 24px in mobile ??
    this issue especially with heading, how can i fix this?

    • If you reach out to your theme’s support they should be able to let you know how they have set up the mobile CSS

      Admin

    • It would depend on what was edited, if is CSS then you would add the CSS under Appeaance>Customize>Additional CSS. If it is more of an HTML change then you would want to check with your theme’s support as WordPress themes are built with templates, for a bit more on that you would want to take a look at our glossary page here: https://www.wpbeginner.com/glossary/template/

      Admin

  3. Once I make changes, how I can save update/edited page? Whenever I close it it revert to previous version.

    • Inspect element is for testing the changes, if you’re editing the CSS you would want to copy the CSS you added and paste it under Appearance>Custmize>Additional CSS :)

      Admin

  4. My dilemma is that once I inspect an element, I’d like to know what PAGE in my theme this element appears on. So there’s an e lement that appears as part of my theme, throughout my site, and when I inspect element, i can see the code, but can’t determine what portion of the theme has it, so that I can change it in the child theme, permanently. I tried editing one page, directly from the inspect element pane, but as soon as I exited and returned, my change was gone and it was “back to normal.”

    Anyway to inspect to element and determine where I can find it in my theme files?

    Thank you.

    • Hi Kristina,

      You can try to guessing the template file based on where the code appears in the page layout. For example, if it is in header section then you may look for it in the header.php file. You can also download all your theme files via FTP and then use a tool that allows you to search for text in multiple files at once. One such app is Notepad++ (for Windows), open the app and the go to Search > Search in Files.

      Admin

  5. This is such great content, thanks a lot for sharing.

    Little problem for me, nothing happens when i click ‘inspect element’ in my chrome browser. Any help or suggestions?

  6. Sir,
    Actually i am new in wordpress can you tell where from i can edit the Html elememt and where i
    can found the element.style in wordpress theme.

  7. This is a very great post you have here. But I need to draw your attention to something.

    I don’t know if you have noticed but this particular article has being stolen. It looks like the culprit only goes around the web stealing content. As I write this comment, he has copied about 5 of my articles.

    The website is even not in Google Search. I was just checking how my website looks in Yandex search results and I happen to find this thief.

    Here is the link to the stolen article

  8. Customizing WordPress for DIY Users and you have also highlighted What is Inspect Element or Developer Tools? You also given us the video tutorial the basic of inspect elements. To be honest that is great content wherever you share with us. Thanks a lot for sharing this content with us.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.