Not sure this is a question suitable for this forum, but I'll try:

I think it is pretty convenient targeting elements in css/jQuery for a specific page by using the page-id-{ID} generated by body_class() in a template.

But this gets problematic when developing on a local dev machine and then transfering to a staging server for your customer where the page id's is not the same.

How do you handle this?

  • 1
    Just out of curiosity: How many different style sets do you (want to) have? I consider this neither convenient nor applicable. But maybe I got you wrong. Do you really have for each of a lot of pages a separate style for certain elements? Where are these elements located? – tfrommen Apr 25 '13 at 19:29
  • Not different style sets. What I mean is for example if I have a div and want to set a different background-image for it depending on page, I use the page-id-{ID} in CSS. – BoBoz Apr 25 '13 at 19:35
  • Where is this <div /> located? In the page content (=> dynamical)? Or in a sidebar, header, footer (=> static)? Do you want to style this differently for some or for all of your pages? – tfrommen Apr 25 '13 at 19:42
  • Not in the content but otherwise located all over the place. And for some pages. – BoBoz Apr 25 '13 at 19:52
  • @tf What he want to do is something like this: create a page 'dog' with ID 3 and a page 'cat' with ID 5. Then style the background with .page-id-3 { background: url(dog.jpg) } .page-id-5{ background: url(cat.png) } – Ralf912 Apr 25 '13 at 19:52

You could use slugs instead of IDs.

Taken from the Starkers theme (add it to your functions.php):

add_filter( 'body_class', 'add_slug_to_body_class' );

    function add_slug_to_body_class( $classes ) {
        global $post;

        if( is_home() ) {           
            $key = array_search( 'blog', $classes );
            if($key > -1) {
                unset( $classes[$key] );
        } elseif( is_page() ) {
            $classes[] = sanitize_html_class( $post->post_name );
        } elseif(is_singular()) {
            $classes[] = sanitize_html_class( $post->post_name );

        return $classes;
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.