Custom styling for single pages

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 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;
}

Was this useful? 10