-
-
While spending my time stalking wordpress support forum, I stumbled on this 6 days old unresolved topics ” using page/post id to specify per-page css in 2.5″.
I’m about to upgrade a site from Wordpress 2.3 to the latest version. I’ve previously been employing the page id in order to have page specific CSS, e.g., pages with either 0, 1 or 2 sidebars.For example, if the url is http://site.com/page1, the page is styled with a combination of a template and CSS to specify the width of primary:
#page1 #primary {margin-left: 0;width: 890px; }
I’ve read in some other posts here that Wordpress 2.5 no longer uses this, and now the post ID is used instead [...] ~ hauntedtapedeck
Workaround
Basically, what we need is a unique CSS Selector for specific post & custom page inside the template.
-
First we create a function for our CSS selector and save it inside WP theme functions.php
functions.php: get_post_selector_classname()
function get_post_selector_classname() { global $wp_query; if (!is_object($wp_query) ) return; if ($wp_query->is_single || $wp_query->is_page) { $pid = $wp_query->post->ID; $post_type = $wp_query->post->post_type; return 'wp-'.$post_type.' '.$post_type.'-'.$pid; } } -
Next we call the get_post_selector_classname function inside the template. You can call this function anywhere inside your template but the best placement for the class selector is inside body tag (more weight for inheritance).
header.php
<body class="<?php echo get_post_selector_classname();?>">
Available CSS selector
The following CSS selector is available inside WP post single and page only.
- body.wp-page
- body.page-ID
- body.wp-post
- body.post-ID
CSS Example
styling “single page” post.
body.wp-single{background-color:#f6f6f6;}styling a single page with post ID 69.
body.single-69{background-color:#f6f6f6;}styling custom page with post ID 42.
body.page-42{background-color:#f6f6f6;}styling all custom page.
body.wp-page{background-color:#f6f6f6;} -
-
- July 16, 2008 at 6:55 am
- August 27, 2008 at 1:02 pm
- 0.3
- url
-
-
-
5 Responses to “How to create specific CSS selector base on WP Post Type and Post ID”
Trackback URL: Use the TrackBack url ↑ to ping this article. If your blog does not support Trackbacks you might want to leave a comment instead.
-
-
"write as if you were talking to a good friend (in front of your mother)."
.haveyoursay
Disclaimer: For any content that you post, you hereby grant to Kaizeku Ban the royalty-free, irrevocable, perpetual, exclusive and fully sublicensable license to use, reproduce, modify, adapt, publish, translate, create derivative works from, distribute, perform and display such content in whole or in part, world-wide and to incorporate it in other works, in any form, media or technology now known or later developed. Some rights reserved.
-
Hi!
First off, thanks so much for taking the time to address this. It was me who posted the original query.
I'm working my way through your instructions, and have come up against a problem with the second part here. I'm using a modified version of K2, and in header.php, it already has this:
<body class="">
How should i go about applying your modification?
Thanks!
k2 already has a similar type of class selector:
post
postid-ID
page
pageid-ID
if you still want to try my mod check the filter code.
Gah, how'd I miss that!?
You're a lifesaver. Thanks so much.
Great example, but there is a mistake in the function code. The function should be get_post_selector_classname, not get_post_classname
Sweet thanks Gerry, fixed