Menu
Successful Web Strategy Successful Web Solution
development | design | execution | marketing | conversion | success
We are here for you: 334.403.LOVE (5683) | questions@successfulwebstrategy.com

Targeting Specific WordPress Post or Page with CSS

targeting-specific-wordpress-post-or-page-with-cssTargeting Specific WordPress Post or Page with CSS.

July 3rd 2015

Just a quick note – maybe help someone out there in the world.

One of our clients wants each header on each page and post to have a unique background image. So we were confronted with the problem of how to make this happen not just with pages but post as well. The drawback of course is that our css file can get bloated as this moves forward however the client was happy with the speed loss compromise.

The best way we found to do it was to target the body and then the specific page / post and header element. So:

Pages:


/* Home bg ******/
body.page-id-21 .builder-module-1-background-wrapper {
background: url(http://yoursite.com/images/home.jpg) no-repeat top fixed !important;
}

This site was built with iThemes Builder Child Theme (which we highly recommend).
body.page-id-21 = This is the page id of the specific page are targeting. You can find this in the WordPress admin if you are editing the intended page and look at the address bar you’ll see the id there.

For example our homepage in the address bar looks like this:
http://www.yoursite.com/wp-admin/post.php?post=21&action=edit

You see the 21 in there. Now with pages it is best to change the word post to page (only with pages – with blog post stick to post) so you get body.page-id-21

.builder-module-1-background-wrapper = this is the div that contains the header image. You can use Firebug for Firefox or Chrome’s developers tools to find what yours is and then just put it in place via class(.) or id(#) and then in our case we want a different background image so we have:

background: url(http://yoursite.com/images/home.jpg) no-repeat top fixed !important;

All done and we move to the next page.
/* Bio bg ******/
body.page-id-8456 .builder-module-1-background-wrapper {
background: url(http://yoursite.com/images/bio.jpg) no-repeat top fixed !important;

}

Post:

Post operate the same with one important difference.

/* Post Topic ******/
body.postid-3784 .builder-module-1-background-wrapper {
background: url(http://yoursite.com/images/home.jpg) no-repeat top fixed !important;
}

body.postid-3784: .postid- is different for post for pages we were using .page-id-
So you’ll want to make a note of that.

We did a bit of reseach and there are other methods to accomplish this however for us this was the best one at the time.
Alright let us know if you have and questions.

Leave a Reply