Custom styling for single pages

Please Note: Theme customizations go beyond the scope of our support services and this article is provided solely as a courtesy to our customers. Please take a moment to review the Scope of our Support.

There may be cases when you would like to apply some custom styles for a single page on your site, but not to all of the pages. In such cases the body_class function is very helpful, as it adds a custom class to each page. This function has been implemented in all the themes released after the Acoustic theme (including Acoustic). If your theme doesn’t contain this function, you just have to open the header.php file and modify this line:

<body>

to be like this:

<body <?php body_class(); ?>>

after that some custom classes will be added to the body tag of each page on your installation (you can inspect it with Firebug or by viewing the page source). Here is an example of a body tag using this function:

<body>

Note: You can use FireBug to see your page ID

On this example you can see the following classes added to the body:
page : meaning that this is a page
page-id-123 : the ID of the page is 123
page-template-template-contact-php : the page uses the template file called template-contact.php

So, if for example, you would like to hide the logo on the page with ID 123, you would use this CSS:

.page-id-123 #logo-container{
display:none;
}
Article key words: change specific page, only to a specific page, apply changes to one page only, landing page, remove from one page only

Was this useful? 10