Kimb Jones

Making and Doing with WordPress

  • About me
  • Projects & Work
  • Portfolio
  • WordPress services
  • Events & speaking
  • Contact me

How I set up different background colours for my WordPress pages

November 1, 2013 by Kimb Jones

Notice how the different sections of my website have a different background color? Well, this isn’t a particularly challenging piece of code to implement but since I launched my new site a few weeks ago I’ve had a few of emails and tweets asking how it was done.

Setting up a friendly ‘body_class()’ in WordPress

By default most WordPress themes will add a CSS class to your sites <body> element that includes the post type, page/post ID and any template you may be using. It looks something like this:

If your theme doesn’t have a body_class() set up you can add your own using the following bit of code:

This CSS class allows you to individually style pages/posts by referencing the values in this class from your themes stylesheet.

But the post/page ID is a little difficult to remember, it could also change if you do a major edit, so how about using the title instead?

Check out how my site loads it’s body_class() for my WordPress services page:

Note the addition of ‘page-wordpress’.

And here is the code snippet that makes that happen (add to your functions.php file):

This code gets the page type: ‘$post->post_type‘ (in this case ‘page’) and the page name: ‘$post->post_name‘ (taken from the slug) and adds then to the body_cass() – for example an ‘About Kimb‘ page would return ‘page-about-kimb‘.

Changing the WordPress page background color with CSS

And now the easy part, choosing your colours – here’s a snippet from my stylesheet:

Done! Now I can reference any new page titles using a more friendly and memorable body_class().

Learn more about the WordPress body_class()

I’ve used the body_class() feature since it was introduced in WordPress 2.8, it’s really useful for pages with logged-in users and advanced homepage layouts. Before this was introduced developers would have to cobble together custom elements using conditional tags and other nasty complex hacks.

Some useful example classes which WordPress adds are:

  • page-parent
  • page-template page-template-{directory}{filename}_php
  • search-results
  • error404
  • logged-in
  • author-user_nicename
  • single-{posttype}
  • home page

Read more about the WordPress bodyclass on the Codex.

Filed Under: WordPress

Recent Posts

  • Make Do’s ‘100 Blog Post’ Rewind
  • Why is Make Do a WordPress Agency?
  • What are these Flexible Packages we use at Make Do?
  • FrontEndNorth is happening soon!

Like what you read?

Sign up to my mailing list for occasional updates.

About Kimb Jones

I’ve been a web designer since the 90's and co-founded the Make Do WordPress agency.

Kimb Logo

CEO and co-founder of the Make Do WordPress agency.

I also run the WordPress Sheffield meetup.

Work with me

If you'd like to discuss a project get in touch.

Make Do

A WordPress Design & Development Agency. We Make WordPress Do More!

Let’s connect

  • Email
  • GitHub
  • LinkedIn
  • Twitter

Built by Kimb Jones and powered by WordPress. Jump to top of page.