-
-
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”
Comment page 2 of 2
Reply
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.
RSS feed for comments in this post
« Previous 1 2