How to Make A CSS Change to A Single Page in WordPress

Wanting to make a change on your WordPress site, but wish that change would only affect certain pages? Well, you can do that! All you have to do is signify the page id number in your CSS.

what good does changing just one page do me?

Being able to change a single page is one of my most requested a la cart services. I have many clients who don’t want page titles to appear on certain pages or want to swap out their hero images on pages to make page-specific hero images. (I did that on my about page.)

Common uses for page-specific styling:

• Have different hero images/headers for each page
• Having different styles on a landing page
• Remove page titles from a select number of pages
• Show/hide content on certain pages that’s not in widgets

Note: In order to do this, you’ll need a basic understanding of CSS. You can quick pick up CSS knowledge from a free resource like Skillcrush’s 10-Day Boot Camp, or you can go full steam ahead in my Web Design Crash Course for Creative Bloggers.

 

So how do I find the page id?

It’s fairly simple! All you have to do is add the page id to the CSS style.  You can find the page id by using Inspect Element or by going into edit the individual page in WordPress.

Here’s the page id for my About Me page. You can see that it says page-id-3731.

 

You can also grab the page id from the URL when you’re editing a page. It’ll be right after the post=.

 

How do I write the code?

Now that you know the page id number, you can write the code. All you do is add .page-id- before the page id number. In our example, my About Me page id number is 3731, so the code would be .page-id-3731.

Then you add that whole line of code .page-id-3731 before your style changes. When you put the page id first, you’re telling the code that you want your style change to only affect that specific page.

Here’s an example of the page id code. This CSS code says that I want to have a different hero/background image on my About Page.

Where do I put the code?

Your code goes inside your stylesheet.css file, or in the Additional/Custom CSS area in your theme Customization or Theme Options menu.

• Wondering where that is? Watch this video lecture.

And that’s it!

It really is that easy. Now go forth and make engaging and unique changes to your website!