How to Hide Elements on Specific WordPress Pages
One of our members was creating a landing page in WordPress and needed to hide some elements of his theme. However, those elements couldn’t be hidden from the theme or widget settings.
We recommended he use a quick solution that requires a little CSS.
In this post, I’m going to show you how to hide elements on certain pages of your WordPress site.
Step #1. What element do you want to hide?
In this example, I want to hide the main menu, but only on one specific page.
Use Chrome or Firefox Developer Tools to look for a unique CSS selector. If possible, find an id, although a class may work too. In my example, the selector that wraps the menu is #mainmenu.
Step #2. Get the unique class from the body tag
Look for a unique class printed inside the body tag.
In this context, a unique class is exclusive to this URL, which means that it doesn’t exist on other pages.
In my example below I have the .postid-1762 class, which refers to the post id.
Step #3. Build the final selector
Merge the selectors from step 1 and 2 to build a final selector. The class from body comes first, following this pattern:
{codecitation css}.unique-body-class #element-to-hide {
display: none;
}{/codecitation}
In my example would be:
{codecitation css}.postid-1762 #mainmenu {
display: none;
}{/codecitation}
I set the display property with a value of “none” to make the menu invisible.
Step #4. Add your custom CSS
Add the CSS code in one of the CSS files from your theme, or using a plugin.
Step #5. Check the end result
The element will not be displayed in the URL that prints the unique class from step 2. However, it will remain visible on the rest of your pages.
Thanks for this post! (i forgot)
Thanks for the kind words Alastair.
Thank you for your post! It helped me in a struggling area.
I was trying to make a post one particular background color, but I couldn’t change the entire background color for the page. I was using #post-1234 .site-main rather than .postid-1234 .site-main
I tried this on Genesis and it worked, buy the post id is is not showing in my current theme.
Could you help me to figure out.
Hi,
please can you open a support ticket and we will gladly take a look?
Hi! Thanks for this post. Is there a way that I can use this to also effect all child pages of the one I’m applying this to?
This depends on the fact which CSS classes does those child page have. It should be possible with the clever CSS overrides
What I’m trying to override with my CSS are a couple of global ID’s and one Class, but just for the one parent page and it’s child pages. These are the changes I want to make:
#main {
background-color: #000 {
}
.page-id-8517 body.has-sidebar #content {
width: 100%;
}
.sidebar {
display: none;
}
To go through each page using your example (which was super helpful!) might be a bit tedious for my needs. But as you can see, if I change some of these (such as #main) it will change it elsewhere on the site.
Hi Kit,
You need to inspect and use the specific Classes and ID’s or create them so you can theme the site better.
Thanks
Daniel
Wonderful thanks
Valentin, thanks for this post. You saved us tons of wasted back and forth time with the developer and allowed us to make our site even more customized for our audience.
Hi @hirethehomefront
I’m glad you find this tutorial helpful.
Have a good day.
Hi, how if I would like to show the elements on only one specific page? display: “Post-id” ?
Works like a Charm
That was a great help, thank you very much!
Wow, great stuff. I tried like 10 different ways of doing this. Super simple and to the point. Just a heads up; I was working on a page in my case. so the code was:
.page-id-946 .ads-970×90 {
display: none;
}
Hopefully that helps someone.
this really blow off my headache over two days! You’re my fantastic hero!
Duuude…. Thanks sooo much!
I’ve been having nightmares trying to figure out whether I’d crash my whole site by ditching the footer.entry that kept an “edit” link showing up on every page. This tip just saved me so much stress, agony, and eye pain combing over all of this code. Thank you so much!
I wish you would do a WordPress tutorial on how I can show and hide an image. For example, I want to show 3 daily special images for a restaurant.
How to hide a specific widget on a specific page?
Use a plugin, Dynamic Widgets 🙂
Thank you, its working like charm!!!!!
Omg!!! Thank you so much for making this Tutorial. You helped me solve a problem that I was stuck for 2 years +++ I would never figure out the answer if not for your tutorial. Thank you so much!
AWESOME! We love teaching, informing, and learning, but it is especially rewarding when we are super useful to our audience and save them time and effort! Thanks so much for taking the time to send us a message.
Yes!!! I am truly grateful to you and you inspired me to keep a record of my own experience in case it may be useful for someone in future too!
How about if I only hide this to all pages except homepage?
The basic WordPress theme add “page-template-default” class to all pages except the home page. If this is the case you can simply:
[quote].page-template-default #mainmenu{
display: none;
}[/quote]
However, you may not be using the basic theme. By default, WordPress homepages have a “home” class. You can try the pseudo-class :not().
[quote]body:not(.home) #mainmenu{
display: none;
}[/quote]
That will hide the menu on every page that is not the home page even plugins like woocommerce.
If you only want to hide the menu on just Blog posts, try this:
[quote]body[class^=”postid”] #mainmenu{
display: none;
}[/quote]
Or, just all created pages(not blog posts):
[quote]body[class^=”page-id”] #mainmenu{
display: none;
}[/quote]
Or, you can add both and the menu will be hidden on all blog and created pages but not on plugins or the home page. What body[class^=”classname”] is doing is looking for any class starting with classname on the body element, and all blogs classes start with postid. All custom created pages have a class starting with page-id.
I hope this helps!
Awesome, thank you so much for this fast and easy help!!
Thank you so much!
Hey Valentin,
Could you help to figure out the CSS code to hide Read More buttons in Content View on a single page?
Based on your example I tried the following code (didn’t work):
.postid-233 #pt-cv-readmore {
display: none;
}
Would you have any suggestions for a more workable code?
Thanks!!!
Laura,
Try adding !important to the display property value. WordPress sets the display value so maybe it is overriding your styling.
.postid-233 #pt-cv-readmore {
display: none !important;
}
If that doesn’t work, just double check and make sure pt-cv-readmore is an id and not a class. That is what immediately comes to mind without seeing the page.
Hope this helps! If not, let me know.
much simple and easy way of doing saved my time. Thank you very much
Amazing, simple tutorial.
Thanks Valentin!
Just Loved It.
Hi Thanks for this tip it is really handy. How can I hide a button with your example but only show the button for users: administrator and admin?
Is there a way to do the opposite? I have a block in a widget area that i only want to show on the home page or to a first time visitor.