How to Hide Elements on Specific WordPress Pages

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.

Find a CSS class so you can Hide Elements with CSS

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.

Find the Post ID in WordPress

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.

Hide Elements with CSS

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
37 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Alastair Coleman

Thanks for this post! (i forgot)

daniel-pickering

Thanks for the kind words Alastair.

CodeLearner

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

Chandan

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.

mihha

Hi,
please can you open a support ticket and we will gladly take a look?

Kit

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?

mihha

This depends on the fact which CSS classes does those child page have. It should be possible with the clever CSS overrides

Kit

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.

danielpickering

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

Prosperity Kenneth

Wonderful thanks

HiretheHomefront

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.

htmgarcia

Hi @hirethehomefront
I’m glad you find this tutorial helpful.
Have a good day.

Max Soon

Hi, how if I would like to show the elements on only one specific page? display: “Post-id” ?

Anwar

Works like a Charm

NikeZzy

That was a great help, thank you very much!

Davor

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.

Tiến Dũng

this really blow off my headache over two days! You’re my fantastic hero!

Alex Salmi

Duuude…. Thanks sooo much!

Quantina

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!

Carl Iverson

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.

Albert hinkle

How to hide a specific widget on a specific page?

Jam

Use a plugin, Dynamic Widgets 🙂

Moxet Khan

Thank you, its working like charm!!!!!

sue

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!

mikall

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.

Sue

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!

Edgar

How about if I only hide this to all pages except homepage?

mike

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!

Jenny

Awesome, thank you so much for this fast and easy help!!

mj

Thank you so much!

Laura

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!!!

mike

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.

taj

much simple and easy way of doing saved my time. Thank you very much

Luka Peteh

Amazing, simple tutorial.

Thanks Valentin!

Sayanta Gupta

Just Loved It.

Daryl du Preez

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?

Will

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.

37
0
Would love your thoughts, please comment.x
()
x