Yes. Each page is going to have a specific ID associated with it. You can see the ID by doing a view source or view page source on the page. Look for the <body tag, it should look something like this:
<body class="page page-id-15 page-parent page-template-default ...
The page-id-## is the class name which uniquely identifies each page; that is, the ## will be different for each page.
So let’s say you want to hide those elements on page IDs 123 and 456. You would add this rule using a CSS plugin (don’t modify the theme’s style.css file, or your changes will be lost the next time you update the theme):
.page-id-123 .site-branding,
.page-id-123 #banner-wrapper,
.page-id-456 .site-branding,
.page-id-456 #banner-wrapper
{
display: none;
}
So note that there is a pair of selectors for each page, one which selects the site title & tag line, and the other which selects the banner image. The very last selector in the list should not have a comma after it (a comma, though, must separate each selector).
Thank you!
This works just great.
That worked great for the pages I wanted no header on; however, I’m getting stuck on my blog page. It stills displays the header.
Looking at my source code, part of the menu is as follows:
<li id="menu-item-979" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-415 current_page_item current_page_parent menu-item-979"><a href="http://www.taichichihnoco.com/community-blog-tccnoco/">Blog</a></li>
<li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-162"><a href="http://www.taichichihnoco.com/sharing-the-joy/">Sharing The Joy</a></li>
This css is not working (but does work for all my other pages)-
.page-id-415 .site-branding, /* 415 is BLOG */
.page-id-415 #banner-wrapper,
{
display: none;
}
Is there something different I need to do for the page set as my Blog?
When you view the source for the blog page, then I assume that there’s no page-id-415 class associated with the body tag. But you may see a blog class, so you can try:
.blog .site-branding,
.blog #banner-wrapper,
{
display: none;
}
You want this hidden on the blog home page (where your post summaries show), or the full post pages as well?
Ah, ignore that…CrouchingBrian beat me to it, lol
I would like to know how to hide this on the full posts of blog as well. Would you need the css for each post? or is there a better “global” manner that would apply to all posts for the blog’s category?
Each single post is going to have a class name called single-post, so you can use that in the selector:
.single-post .site-branding,
.single-post #banner-wrapper,
{
display: none;
}
Thank you for the assistance.
You have helped me learn.
I also want to say thanks to CrouchingBruin for helping out as well…thanks!
