WordPress Quick Tip: Target a specific page with CSS

This quick tip requires a basic understanding of WordPress, css, and the know-how of identifying styles of whatever element you want to change (either using the “inspect element” function in Firefox, or whatever method you prefer).

Let’s say you’ve built a great looking site using a theme, that said theme includes a call to action bar at the bottom of every page that links to your contact page. The colour of that CTA bar is black, and even though there’s an option in the theme options to change the colour, you’d like it to actually be white on the homepage, but still black on all the other pages.

Here’s how you can target only your homepage using css (this works with any page btw, doesn’t have to be your homepage).

1. Identify the class/id of the element you want to change

I’m not going into detail on this, in Firefox you can just right-click on the element and choose “inspect element” which brings up the Inspector with your element highlighted, and the associated classes or id. Find the correct class/id.

For my theme, the call to action bar has an id called #call-to-action

2. Change the background colour value of that class/id

If you’re in the Inspector in Firefox, you can change it right there and see the change instantly. Change the value until satisfied (the preferred background colour value in this case would be #ffffff).

3. Copy your changed style to a txt doc for later use

In my case, it would be

 #call-to-action {
    background-color: #ffffff;
 }

4. Identify your page id

Next we need to find the unique id of the page you want to target. To find this, just hover over the “Edit Page” button on the top WP Admin bar. Notice the url it links to, it’ll have a section saying something like post.php?post=1109. That number after post= is your page id, in this case 1109.

5. Add that page id to your css to target it

Next go back to the code you copied to a txt file and paste the following in front of it -> .page-id-yourpageid

In my case it becomes

 .page-id-1109 #call-to-action {
    background-color: #ffffff;
 }

6. Putting the new css code to work

Paste the new code with the page id either in your custom css theme options (if available), or in your styles.css via Appearance -> Editor (though don’t forget to use a child theme if you’re going the editor way, as you’ll lose the changes when you update theme)

If it doesn’t work, try and make use of the !important declaration.

.page-id-1109 #call-to-action {
   background-color: #ffffff !important;
}

That’s about it! If you’re having trouble getting it to work, feel free to send me a quick message.