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.

19 responses to “Change Backgrounds, Colors, Fonts on Specific Pages”

  1. Derek Ouellette Avatar

    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. Bis Avatar
      Bis

      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. Vidur Vishnudutt Avatar

    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. Sadaf Avatar
    Sadaf

    Hi there, I’m using F8 Lite 421 theme on WordPress, I wanted to know how I could make the images fit for each post instead of them being stretched? My blog is http://sadafshadrooh.myblog.arts.ac.uk

    It’ll be great if you could help.

    Thanks

  4. Charles Avatar
    Charles

    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!

  5. Jake the Snake Avatar
    Jake the Snake

    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!

    1. Paolo Euvrard Avatar

      Hi, I had the same problem. you need to put
      .page.page-id-342 {background-color:red}

  6. disqus_cS61FkpaCX Avatar
    disqus_cS61FkpaCX

    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?

  7. Gurpreet singhmail.com Avatar
    Gurpreet singhmail.com

    nice

  8. Pirath Avatar
    Pirath

    I could not find code of back ground color in my blog. how to find it?

  9. Guest Avatar
    Guest

    Testing font

  10. Paul Avatar

    Thanks really helpful feature!

  11. km Avatar
    km

    for wordpress specific page how to do it

  12. Pravin Khetan Avatar

    Thanks for valuable information. I’ve tried on my website http://www.iplanonline.in . It works fine.

  13. Michael Steff Avatar
    Michael Steff

    Hello there, can anyone help me with removing the date from a post in wordpress full frame please

  14. John Williams Avatar
    John Williams

    Wow! This is scary. Goodbye WordPress.

  15. Bob Avatar
    Bob

    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

  16. John Wick:THE BOOGEYMAN Avatar
    John Wick:THE BOOGEYMAN

    .single { background-color: black }hello

Leave a Reply

Your email address will not be published. Required fields are marked *