Change Backgrounds, Colors, Fonts on Specific Pages

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.

Newsletter
Join over 280,000 independent website owners

The next person to join our monthly newsletter gets a 25% off coupon!

We guarantee 100% privacy. Your information will not be shared.

This entry was posted in . Bookmark the permalink.

Posted by , at Graph Paper Press

Thad is the founder of Theme.Works and Graph Paper Press. Previously, he produced online multimedia and documentary projects for USA Today including the inauguration of President Barack Obama and many others. He lives in Brooklyn, NY with his wife Abby.

  • Google
  • Blog
  • Instagram

19 thoughts on “Change Backgrounds, Colors, Fonts on Specific Pages”

  1. Thanks for this. But I still don’t understand how to change the background colour of just a particular post. I want my regular theme to be as it is, but I want to be able to wrote a short note (say, a word of correction or announce something etc) and have that post stand out with it’s own background. How is the best way to do that?
    Thanks

    1. Hi Derek you should be able to select the element (eg: body) you want to change the background colour attribute of and then define the new background colour for that element in the file where your css is defined (which should be style.css in your child theme).

  2. if one has enabled a theme (mines coraline) how do you change the background and the font colour for the entire blog? Are there specific settings in the customize theme?

  3. I’m looking for the tag on the page I’m trying to edit, specifically home.php, but I can’t locate it anywhere. Am I missing a step in this process? Should I be editing something other than home.php to change the background color?

    Thanks!

  4. Hi Thad. I got really excited about finding this page but I couldn’t apply what you show to my site. For a specific page, what is the CSS I insert into style.css? I put “.page page-id-342 {background-color:red;}” into my main stylesheet, style.css, and it is not working. I pulled it from the source: Can you please help? Anyone who is able to illustrate how to override wordpress CSS for the challenged, like myself, is going to get a lot of web traffic. I hope you can pull it!

  5. Hi Thad, I’m really loving the “Full Frame” theme but I’m having an issue with changing the body colour. I’m putting this into the CSS editor;

    body{background-color: rgba(215, 44, 44, 0.5);}

    with no result.

    I’ve tried following everything you’ve done above and I followed your suggestion to go here

    http://www.css3maker.com/css-3-rgba.html#

    from another thread and still nothing…

    What am I doing wrong?

  6. Thanks for the info!
    My theme only allows to use one color- green. All the menu letters look green, etc. Are they still going to be in style.css file? p.s. i am using kage green theme

Leave a Reply