Single page CSS – Hide Page Title

Every page will have a unique page ID assigned to it, that will also be part of the body element’s classes. That is, if you do a “view source” on one of your pages (or examine the page using a web debugging tool like Firebug or Chrome Developer Tools) and look for the body tag, you should see a class name that looks like page-id-#, where # is the unique identifier.

So let’s say you want to hide the page title for pages which have an ID of 9, 23, and 117. You can add a rule that looks like this in your custom CSS:

.page-id-9 #page-title,
.page-id-23 #page-title,
.page-id-117 #page-title {
   display: none;
}

As an aside, you shouldn’t have to use the !important clause in this situation. Usually, when I see someone using !important, it’s because they don’t understand CSS specificity. The only time you need to use it is if:

1. You have to override an inline style.
2. There is an existing rule with such a high specificity that it can’t be overridden with a higher specificity (i.e., by tacking on additional class and/or ID specifiers), and adding a rule with an identical selector won’t work because the rule you’re trying to override comes after your custom CSS.

Use Chrome DevTools or Firebug to determine what CSS rule is in effect and first try adding an overriding rule with the same selector, and if it doesn’t work because your custom CSS comes after the stylesheet that contains the rule, then add to the specificity of the selector by tacking on either an element, class, or ID. You want to just use the minimum amount of specificity to get the job done.