WordPress Quick Tip: Target a specific page with CSS

By August 27, 2018September 10th, 2020WordPress

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.

12 Comments

  • Avatar Curtis says:

    Hi Tom,

    Great article. I commonly use this on pages, but strangely a site we have built recently doesn’t allow us to target a page like that and I cant get my head round it. Am I missing some extra code somewhere else?

    http://www.denhay.co.uk/facebook/competitions/forest-holidays/

    For example, making the header disappear Io would use:

    .page-forest-holidays #header-wrapper { display:none!important;}

    Can you help?

    Curtis

    • Matthew Rogers Matthew Rogers says:

      I can’t see that class (.page-forest-holidays) anywhere in the page’s body tag.

      Try:
      .page-id-748 #header-wrapper {display:none!important;}

      Tom

  • Avatar Thomas says:

    Hi Tom,

    I have been trying to apply CSS rule to a specific page on my wordpress but some of them would work and others won’t. For thoses which are working I use the following code before the rule:
    article#post-1098.post-1098.page.type-page “class” {…
    I have been able to find using “inspect element” function.
    Unfortunately other classes don’t display the page id before and when adding it into the custom CSS to target that specific page it wouldn’t work, example : article#post-1098.container.content-wrapper { padding-bottom: 0px !important.}
    On another hand if I remove the page id it works fine but then it becomes a generic CSS rule.

    Any idea on what could cause this ?

    PS: my website is under construction on Maintenance mode so I can’t direct you on it :/

    Thanks
    Thomas

    • Matthew Rogers Matthew Rogers says:

      Hi Thomas,

      Love to help you out, though I can’t do much w/o seeing it :).

      Posts work the same as pages though (it looks to be a post you’re trying to tweak), so in your case I would think if you want to target that specific post, it should be the following.
      .postid-1098.classyouwanttoedit {}

      Tom

  • Avatar Angela Rose says:

    Currently in process of complete redesign and this was so helpful! Happy to have found your site!!

    Thanks!

  • Avatar Alison L says:

    If I were writing page-specific code and wanted to target multiple elements within a table on that page would I do it like this?
    .stats table, th, td{border: 1px;}

  • Avatar Benedikt says:

    Hi Matthew,
    I think I need your help:
    I am using twenty seventeen WordPress theme and I use this custom CSS to increase page width:
    .wrap {
    max-width: 100%;
    }

    @media screen and (min-width: 48em) {
    .wrap {
    max-width: 100%;
    }
    }

    .page.page-one-column:not(.twentyseventeen-front-page) #primary {
    max-width: 100%;
    }

    @media screen and (min-width: 30em) {
    .page-one-column .panel-content .wrap {
    max-width: 100%;
    }
    }

    the CSS is working fine but I only want one page to be wider.
    just putting the .page-id-72 in front is not working.
    What do I have to do?
    Thank you very much

  • Avatar Mayda says:

    Thanks for the helpful article. I used this to hide the price on the woo-commerce product carousel on just the home page on RT-18 theme and it worked on the first try. Thanks again for sharing your knowledge.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

汤姆猫网站是多少