Hey there, welcome to WPBeginner and
thanks for watching. In this video I’ll show you the basics
of how to use inspect element with your WordPress website. Modern web browsers
like Google Chrome and Mozilla Firefox have built-in tools that allow
developers to debug errors. In this video we’ll be focusing on the inspect element
in Google Chrome to handle our debugging. So the first thing I’ll do is go to my
website and say if there’s something I need to change or fix but I’m not really
sure where it, is where I can find it then you can use the inspect element. You
can pull up inspect element easily by using the ctrl or command shift I. When
you use those key combinations you’ll see this area down here. On the left it’s mainly to show you HTML and on the
right its concentrating on the CSS that can be found on the website. Also if you
notice as I’m scrolling up with my mouse you see different areas getting
highlighted up here. Those are the areas that are
specifically being targeted with the inspect element. One of the best ways to
open inspect element is usually if you’re working on a certain area say
like this title area I want to change I’m actually going to right click right
there click inspect and the beauty of that is
it will come up exactly where I’m wanting to work on. Over here you see
those little arrows and you can see all the nesting going on and you just want to
click through to find the nesting that you’re working with and as you see the
entry header and entry title is what we’ll be working with here. So around the
left you see the highlighted area and when you click on these areas you also
see the right CSS keeps changing. I’m gonna click back on the entry header
here the entry title of my post and just scroll through here a little bit to show
you a bit of this. So all of these CSS elements are what’s driving that header
and you see here specifically is the entry title and it’s showing the font
family and if you want you can deselect this check mark and once I do
that you see that it changes the font. As you keep scrolling down you see more items
that are using this CSS so how is that useful? As you see over here the class that
we’re working on is the entry title and most of the time people want to change
the background color or the color of the text and you can play with this to see
what would look good before making any changes to your actual theme. So I’m
going to do over here on the right is that click down here so we have a little
arrow in a cursor and I want to put in color and you see all the typical CSS
elements pop up and just to show the difference I’m going to put that in blue
and I hit my tab so I’m going to start a new one and I’m going to do a background
color and as you see again it brings up all the main elements. You can use your
arrow keys to select which one you want. I’m going to do background color and we
want that one to be red and I’ll click enter. So this is where you can see where the
items are being changed but they’re actually not being changed on your
server. So this is a great way for you to test things out, find where the issue is if you’re trying
to make adjustments to theme, and then once you fix it to how you want it to be
you can just go in here and copy those items and then paste them in the theme
specific area or the plug-in specific area that you need to and if you’ve
messed it up beyond recognition and you just want to start all over you can just
refresh your page so I’ll hit f5, refresh my page and it changes everything back
to the default that we were working with. If you like this video click on the like
button and go ahead and leave us a comment there we’d love to hear from you
and subscribe to our YouTube channel to get the latest videos.

Basics of Inspect Element With Your WordPress Site

14 thoughts on “Basics of Inspect Element With Your WordPress Site

  • August 25, 2016 at 6:43 pm
    Permalink

    for the css part.why r they lines through some of them? it looks like they r crossed out , if so then why r they there?
    thanks and awesome vid

    Reply
  • August 25, 2016 at 10:14 pm
    Permalink

    press F12 button For inspect element

    Reply
  • August 26, 2016 at 7:07 pm
    Permalink

    Interested to know what the strike-through means in the Inspect element css side. Really helpful. Thank you.

    Reply
  • August 26, 2016 at 7:30 pm
    Permalink

    For the commenters who asked questions about the strike-through CSS lines:

    The CSS lines that have strike-through are overwritten by a later rule.

    Say you specify that the default font on the site is Open Sans, and later on in the CSS file you specify that headings are Helvetica, you will see the line specifying Helvetica high(er) in the list and Open Sans with a strike-through further down the list.

    Hope my explanation makes sense.

    Reply
  • September 7, 2016 at 10:16 am
    Permalink

    very good video … you explained it simply and clearly … thanks

    Reply
  • January 27, 2017 at 3:50 pm
    Permalink

    I have a container on my button, because it expands toward the right of the page. I changed its max width on inspector element and it helped. But how do i change for good on wordpress?

    Reply
  • July 27, 2017 at 10:42 am
    Permalink

    Thanks guys.This video made my day..
    I'd always have to go to my WordPress Theme Editor and look for anything I want to change but this just gave me super easy way to do my theme changing…

    Reply
  • September 7, 2017 at 5:33 am
    Permalink

    hi , i have a question , how can i find where is my element with inspect ? you know i have 2 text in my site want to translate it but i can't find the source , can u help me?

    Reply
  • March 30, 2018 at 9:09 pm
    Permalink

    Thank u very mush šŸ™‚

    Reply
  • May 13, 2018 at 3:41 pm
    Permalink

    How do you save changes though ?

    Reply
  • August 2, 2018 at 11:54 am
    Permalink

    how to save inspect ?

    Reply
  • October 17, 2018 at 3:11 pm
    Permalink

    THANKS
    btw love this vid-Iļ¼³ļ¼µļ¼¢ļ¼¢ļ¼„ļ¼¤

    Reply
  • February 25, 2019 at 7:46 pm
    Permalink

    how we can locate the file, to edit the html code showing on left side, in WordPress installed on localhost .Thanks

    Reply
  • April 30, 2019 at 1:05 am
    Permalink

    Hey, thanks for the tutorial, but how can I access to the HTML I see in the inspector on my WordPress? I need to change some HTML code but I can't find the source code! šŸ™ Thanks

    Reply

Leave a Reply

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