-
-
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;}Wordpress 2.6.2
I’m not sure why its not working thought. For WP 2.6.2, try the below code
// add inside functions.php function post_selector_classname() { global $wp_query; $output = 'wp-'; if ($wp_query->is_single || $wp_query->is_page) { $pid = $wp_query->post->ID; $post_type = $wp_query->post->post_type; $output .= $post_type.' '.$post_type.'-'.$pid; } elseif($wp_query->is_home) { $output .= 'home'; } echo $output; }call inside template (header.php)
<body class="<?php post_selector_classname();?>">
Refer query.php inside wp-includes folder for more WP hierarchical sections.
-
-
6 Responsesto “How to create specific CSS selector base on WP Post Type and Post ID”
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!
[Reply]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.
[Reply]Gah, how’d I miss that!?
You’re a lifesaver. Thanks so much.
[Reply]Great example, but there is a mistake in the function code. The function should be get_post_selector_classname, not get_post_classname
[Reply]Sweet thanks Gerry, fixed
[Reply]this is not working on wp 2.6.2
[Reply]can you fix it for wp 2.6.2 please?
If you want to comment, please read the following guidelines. These are designed to protect you and other users of the site.
In order to keep these experiences enjoyable and interesting for all of our users, we ask that you follow the above guidlines. Feel free to engage, ask questions, and tell us what you are thinking! insightful comments are most welcomed.
Subscribe to this discussion via RSS
1 2 Next »
Taxonomy
Most used terms