You can hide ANYTHING on your WordPress website by using one line of code in a Custom CSS file. Kori Ashton will show you step-by-step how to hide your footer, or for that matter, anything on your website.
Full Video Transcript
Hey y’all welcome to another WordPress Wednesday. My name is Kori Ashton here in San Antonio, Texas at WebTegrity. We are a group of WordPress nerds in love with all things WordPress; helping you improve your online marketing so this YouTube channel is every single Wednesday we’re producing some sort of great video like this so be sure to subscribe!
Today we’re going to dive right in to, how to hide your footer or maybe even your sidebar inside of your WordPress website. Super simple, but it does require a little bit of magic (well nerd code.) Come on I’ll take you and show you how it’s done. The question actually came in asking specifically how to hide it inside of the 2017 themes. I’m going to show you how to do that but this pretty much applies to any theme out there. This is the example of this brand new 2017 theme and this is the footer they have down here right now in this specific example. However, you can simply just remove these items inside of your widget areas. If you go to ‘appearance’ and go to ‘widgets’ – you just want to be sure that these two widget boxes here (“footer one” and “footer two”) are just completely empty. If you do that (like on my example here) all you will see is, “Powered by WordPress.” This will sit right here and that’s where your content would have sat (if you had anything filled into these two widget boxes.)
However, if you even still want this gone, how do you do it? How do you just completely hide the whole darn thing?
I’m going to show you here because it’s a better example. You can see the content actually go hide.
What I want you to do is ‘right mouse click’ and I want you to ‘inspect element’. Right now I’m using the browser, Firefox, but this works inside of Chrome as well. When you inspect the element, what we’re trying to do here (don’t panic – I know this is a lot of nerd code – follow with me here) is find anything over here that says ‘footer.’ We’re just going to do a search. We see the word ‘footer’ there and then we see the ‘footer’ here. What I want you to see is when we hover over footer it actually highlights behind me here the entire section of that footer. We know that this div class right here affects that whole footer. Now here’s what we do now that we know what it is here. We can come over here to this side and see what they’ve named it in our style sheet. This whole section is named “.sight-footer” and we can do a quick test here and see if this is, in fact, the area that it is addressing check this out so this is our magic that I was talking about. It’s one line of code that just simply says, “hide it” or “display: none;”. Here’s what we have to do now (you notice it’s gone completely.) Here’s what we have to do. We have to grab the name so we know exactly what it is “.sight-footer.” I’m going to copy that onto my clipboard (super simple.) I’ve got that on my clipboard now. Now I’m going to dive into our custom CSS box. Again, super easy. We’re just going to copy and paste – it’s all we’re going to do. Inside of the 2017 theme, you have this customized area underneath appearances.’ Inside of that, you have ‘Additional CSS’ options. This is the little area we want to go into. You’re going to put your cursor down below anything here. We’re going to paste in:
.site-footer {
display:none;
}
There you go. That’s it! This right here overwrites anything else in the in the author’s theme and immediately hides that whole section. Now we’re going to push the ‘Save and Publish’ option right there. Once we come back to our front side of our website, you will see (as I click refresh) that that is totally hidden. As I scroll down I can’t go any further and our entire footer is hidden. So this ‘display:none’ option… the reason why I want to say, “that’s all you have to do is find the div class or the section on your website that you want to hide.” You can hide elements, we can hide, columns, you can hide anything by just simply using the display:none inside of a custom CSS area.
I hope that helps you. If you have further questions put them in the thread below and we’ll do our best to answer them for you. Hope you have a great WordPress Wednesday, I’ll see you next time. Bye y’all!
Find more tutorials on Kori’s blog
