Hide anything on your WordPress website by using a simple line of code in your Custom CSS file. Kori Ashton can give you insight with step-by-step instructions. Happy Hiding!
Full Video Transcript
Hey, y’all. Welcome to another WordPress Wednesday. My name is Kori Ashton in San Antonio, Texas. I’m gonna show you, today, how to hide anything on a WordPress website. Maybe you don’t like the sidebar or maybe there is a whole section, like your footer or any element, for that matter, on your WordPress website that you don’t want to necessarily remove permanently because maybe you want to put it back there. But, for the sake of NOW, you need to hide it and not show it at all. I’m gonna show you how to do that. It’s just a little bit of nerd code.
Stick with me. Here we go.
I’ll give you an example, here. This is a brand new website that we just custom built. I’m gonna scroll down and let’s say that there is this team section down here and for the sake of now, you’ve got a big turnover going on and you want to hide this whole team section. How would we do that? Eventually, we’ll want to use it again, right? So what I want you to do is just right mouse click in this space and say Inspect Element. I’m using Firefox but you can use any browser that you want, though.
You’re gonna inspect the element. In this particular section, the author that coded this theme (our team here that custom coded this) called this section “Team Container”, right? You see as we hover over it, it highlights parts behind this box. So, section “Team Container”. Don’t freak out because I know this is nerd code; but, all we have to do is go over here to the style sheet and tell the style sheet to display, colon, “none”. That’s all we’re doing. Basically what we’re doing is we’re telling the browser “Don’t show this section”. We’re gonna hide this section for now.
Check this out, you guys. It’s totally hidden. Not removed, in case we ever need to use it again; but, it’s totally hidden. I’m gonna give you another quick example and I’m gonna go into the style sheet to permanently make this thing effective. Truthfully, if I just did a quick Refresh the section is actually still there. What I’m doing inside the Inspect Element is trying to find what the name of that container or that dev class (basically the box that the author coded) I’m trying to find out what they named it so I can hide it.
So, let me show you how to do that. Right over here, let’s say in this website we want to hide the entire side bar. I’m gonna right mouse click, I’m gonna inspect element and I’m gonna view this and come down here and see that it’s sidebar…no, this is the section right here. Sidebar, sidebar right…So, I’m gonna come up here sidebar, sidebar right and say “display none” and I’m gonna make sure that it’s hidden. Excellent.
So this right here is the class that I need to go effect. I’m gonna copy that onto my clipboard and we’re going into the dashboard. We’re gonna jump into our customize section and basically what you’re looking for is a custom CSS box. That’s right.
We’re gonna scroll down here on this particular theme and go to additional CSS and all we have to do is paste that in there and do a curly bracket and say “display none” and we’re gonna save and publish. Now, when I go back and click refresh it will actually stay totally gone. How cool is that you guys?
I have to give a shout-out to Nick and one of the best reviews I’ve had in quite a while. It was super sweet. Thanks, you guys, for the encouragement. Bye, y’all.
If you’re struggling with this – try using this plugin.
display:none; is the nerd code needed!
