Here’s another quick and easy tutorial in which I’ll show you how to change the background color of a single page in WordPress.

Cloudways

We won’t use a plugin, just some simple CSS code.

Let’s jump right into it!

Cloudways

Step 1 – Finding Your Page ID

First, you’ll need to find your WordPress page ID.

Go to Pages > All Pages and hover your mouse cursor over the Edit link of the page.

Then, at the bottom of your browser, a link will appear. Note down the ID from that link.

Cloudways

The ID will be the number after post=. In my case, it’s 2.

page id in wordpress

You’ll use this ID for your CSS class that is needed to change the background color of the single page.

Alternative

You can also find the CSS class of that specific page by:

Cloudways
  • Visiting the page in the front-end;
  • Right-clicking anywhere on it and selecting View page source;
  • Pressing CTRL-F (CMD-F on macOS) and searching for page-id to quickly find it;
  • Copying the page-id-X CSS class, which is normally found in the <body> tag.
wordpress page id in source code
Page source in Chrome

As you can see, Chrome highlighted what I was searching for, which is page-id, so I found it right away.

Now, you’ll have to copy the number from the class as well, not just page-id!

In my example, the whole CSS class that I’ll be using is page-id-2.

Step 2 – Adding the CSS Code that Will Change the Single Page’s Background Color

Add the following CSS code in WordPress:

.page-id-2 {background-color: #99E8D0;}
background color change for a single page in wordpress

Here are different methods to add CSS to your WordPress site.

Change the number 2 with your own page ID!

If you used the alternative method pointed out above, you just need to copy the class that you find in your source code, which will automatically contain the correct ID for that specific WordPress page.

If you got the page ID separately, using the first method, replace the one in the code with it.

So, for example, if your page ID is 479, then the code will look like this:

.page-id-479 {background-color: #99E8D0;}

You can also change the background color by changing the hex color code, which is #99E8D0.

This produces a… teal color? :) I’m not so good with colors.

teal background color wordpress page

You can use this tool to pick a color and generate the hex code for it.

So, now, you’ll have a different background color for that single WordPress page!

If the Background Color Doesn’t Change

a) Clear your site and browser (or use a Private/Incognito window) cache, then check again.

b) If that doesn’t do the trick, add !important to the CSS code, like this:

.page-id-2 {background-color: #99E8D0 !important;}

Clear the cache again.

c) If your site uses a full-width layout, not a boxed one, you won’t see the background color because the main container is covering the body.

Here’s an example using the default Twenty Seventeen theme.

teal background

As you can see, there’s only a bit of background color at the bottom of the page, but that’s because I only added a bit of content so you can see what I’m talking about.

If I would add more content to that page, it would stretch the container, completely covering the background.

So, changing the background color or adding a background image works best on boxed layouts.

What’s there to do in such cases?

Well, you’ll basically need to find out the CSS selectors of your main container and change its background color, not the body’s.

Even then, it might not look good, and you’ll have to change the background color of other containers as well.

That’s a Wrap

I hope you found the tutorial useful and comprehensive, and you managed to change the background color of a single page in WordPress!

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

Don’t forget to share the post to help out others!