One of the neat things about WordPress is that it adds a unique id to posts, pages, tags, categories, and widgets (plus lots of things I’ve left out), making it not just possible but incredibly easy to target the CSS styling for one particular instance of any of those items.
Notice!
Update 2014.08.16:When I originally wrote this post, I had a WordPress installation that I used just for testing. I used the codes I mention here on that blog, and then linked to it. Since I now do all my testing in localhost, I have taken down that blog, and have removed those now defunct links from this post.
The Basic Technique
However, WordPress also uses classes to broadly define those elements I mentioned above. I say “broadly” because the class is attached to the `<body>` element. For example, the class for your home page is `.home`. This is true whether you are using a static home page or not. Let’s say that you wanted all your paragraph text on the home page to be blue, you would then add this to your child theme’s stylesheet:
.home p {color:blue;}
Now all the paragraphs on your home page would appear in blue text. If you wanted to narrow this down further, and just target those paragraphs in the content area, you would use:
.home #content-main p {color:blue;}
(Of course, `#content-main` is what the Graphene theme uses to define the main content area other than sidebars. You’ll need to use your browser’s “View Source” function or Firebug to figure out what that is if you use a different theme.)
You are not limited to the home page, of course. Other classes include:
`.archive` —For category and tag archives.
`.tag` — For tag archives only.
`.category` — For category archives only.
`.single` — For posts only.
`.page` — For pages only.
To give you an idea of how this works, I added the following css declarations to my test blog:
.home #content {background:red;}
.tag #content {background:blue;}
.category #content {background:green;}
.page #content {background:purple;}
.single #content {background:yellow;}
.archive p {font-size:24px;}
.postid-118 #content {background:#a8b7f5;}
`.home #content {background:red;}` changes the background of the content area of the homepage to red.
`.tag #content {background:blue;}` changes the background of the content area of tag archives to blue.
`.category #content {background:green;}` changes the background of the content area of category archives to green.
`.page #content {background:purple;}` changes the background of the content area of all pages to purple.
`.single #content {background:yellow;}` changes the background of the content area of all single posts to yellow.
You aren’t restricted just changing background colors, either. You may have noticed that the tag archive and category archive above also have larger text. That’s accomplished by using the `.archive` class. So, `.archive p {font-size:24px;}` changes the font size to 24px on tag archives and category archives.
You can also target a single instance of any of these, by targeting the class for their particular ID. I mentioned in another post how to target widgets by their particular ID. With posts, however, that unique ID usually just refers to the post content area, not the entire page. The class for a particular ID is attached to the `body` tag, so whatever is applied to that class will apply to the entire page, not just the post content portion. Suppose I want to target the background color of the content area of just a particular page. Then I would use this code: `.postid-118 #content {background:#a8b7f5;}`, which changes the background color of that post to a light blue color.
More About Tags and Categories
You can also target a specific tag or category archive by using the class version of their unique ID. For example, the tag “css” on this blog has a unique ID of 340. There are two ways you can target this:
First, you can use the tag ID, like this: `.tag-340`.
Second, you can just use the name of the tag, like this: `.tag-css`.
The same is true of categories. The category “WordPress Tutorials” on this blog has a unique ID of 327. So that archive could be targeted using either `.category-327` or `.category-wordpress-tutorials`. (The space gets replaced by a hypen.)
More About Posts and Pages
Just like archives and posts, pages can also be targeted by their unique ID class, but the structure is a little different. In this case, there is a hypen between “page” and “id”, like this: `.page-id-964`
Want to affect just sticky posts? Then use class `.sticky` !
Conclusion
I hope this helps you to understand how WordPress puts its dynamic pages together a little better. If you have any questions, please feel free to comment. Thanks for reading.
https://techblog.kjodle.net/2012/02/24/styling-wordpress-posts-pages-archives-and-home-pages-by-class/
Thanks a lot for your valuable code. I am searching for customizing the wordpress theme. This can help me something in customization.
Nice information, thanks for sharing. I customize genesis theme and your code is very helpful for me thanks again 🙂
Kenneth John Odle – Awesomely useful summary. A link to this post should be in every front end developers tool bag. Thanks!
Your tutorial is clearly explained and it’s makes it easy to apply. I successfully modified my css in less than a minute.
Thank you so much.