Open up any WordPress theme and inside the header.php file you will likely see this:
<body <?php body_class(); ?>>
The body_class() function is a neat little function that spits out CSS classes that make it easy to change the background color of your About page, for example. It’s easy to find the specific CSS class to target. Here is how you do it:
View the source code of any page and search for the <body> tag. On this page, for example, the <body> tag looks like this:
<body lang="en" class="single single-tips postid-2811 single-format-standard logged-in admin-bar browser-chrome">
The class=”” is the part we are mainly interested in for this tip. Each one of those CSS classes (single, single-tips, postid-2811, etc.) provide us with CSS hooks to target in our stylesheet, like this:
.single { background-color: black } .single-tips { background: #ededed url(http://example.com/images/this-is-your-background-image.jpg) repeat top left; } .postid-2811 { background-color: #ccc; }
As you can see, WordPress allows granular control over the CSS on each and every page. Here is the scope of each class above:
- .single – all single posts, applies to all posts
- .single-tips – all single tips, applies to all tips
- .postid-2811 – only this specific post, doesn’t apply to any others
- .single-format-standard – applies to all posts with the “standard” post format selected
- .logged-in – only shows for users who are logged in
- .admin-bar – only shows if the admin bar is enabled
- .browser-chrome – only shows when users are using the Google Chrome browser. This classes changes depending on which browser is being used.
Pretty neat, eh? You could even enlarge fonts, modify font colors, or really change about anything by targeting these CSS classes in your stylesheet. For example, here is how you could enlarge paragraph fonts on single posts only:
.single p { font-size: 1.2em; }
It’s easy to go overboard with this. Please don’t. Design consistency is important in web design. That said, the body classes above will allow you do style each and every page or post differently in WordPress with a little bit of CSS.
Leave a Reply