Grow your CSS skills. Land your dream job.

Using PHP to Set Body ID problem

  • # February 5, 2009 at 2:43 pm

    First of all, thanks Chris for a great video tutorial regarding this topic. I’m just having one problem. I have a site that includes Home, About, and Blog – so they can all have body ids and therefore I can create the css to correspond to these. But, where I have the blog section I will also be creating posts and each of those has a permalink – created in WordPress – so when it creates the body id it comes out as something like "blog20090205posttitle" and so then I can’t specify a style in css. I would want "blog" highlighted in the menu for anything that resides in the blog directory.

    I’m hoping all this makes sense?! Basically is there any way that I can specify a single style for anything page that’s in the blog section?

    # February 5, 2009 at 3:30 pm

    a bit like this?:
    http://www.woskf.co.uk/blog/

    scroll down to see news highlighted

    (this is what I read from your post highlight a link that your in a blog)

    # February 5, 2009 at 4:06 pm

    Hi, yes exactly that.

    I’ve been using http://css-tricks.com/video-screencasts/36-current-nav-highlighting-using-php-to-set-the-body-id/ to set the body id tag but notice you don’t even have a body id tag?

    # February 5, 2009 at 4:13 pm

    I don’t know how your setting it all up, but in my sidebar I have an id or selected and I styled that, therefor I got that link highlighted.

    but just to let you know, I don’t think it is possible to highlight the actual page I am on on my site, cause I can’t seem to find how to pick the post/link to post, to highlight that, instead I kept the news link highlighted

    "greencode" wrote:
    Hi, yes exactly that.

    I’ve been using http://css-tricks.com/video-screencasts/36-current-nav-highlighting-using-php-to-set-the-body-id/ to set the body id tag but notice you don’t even have a body id tag?

    I never learned wordpress here, I learned it somewhere else, so I don’t have exactly what chris has here.

    # February 5, 2009 at 4:15 pm

    My thinking, and I don’t know enough about php to be able to do this, is to have some kind of code saying "if the page url contains anything other than home, about, contact then use blog". That way I’d be able to specify those ids in my css.

    The current php code I’m using the site-wide header.php file in WordPress is:

    <?php
    $page = $_SERVER;
    $page = str_replace("/","",$page);
    $page = str_replace(".php","",$page);
    $page = str_replace("?s=","",$page);
    $page = $page ? $page : ‘default’
    ?>

    # February 5, 2009 at 4:21 pm
    "greencode" wrote:
    My thinking, and I don’t know enough about php to be able to do this, is to have some kind of code saying "if the page url contains anything other than home, about, contact then use blog". That way I’d be able to specify those ids in my css.

    The current php code I’m using the site-wide header.php file in WordPress is:

    <?php
    $page = $_SERVER;
    $page = str_replace("/","",$page);
    $page = str_replace(".php","",$page);
    $page = str_replace("?s=","",$page);
    $page = $page ? $page : ‘default’
    ?>

    well I am not worried about my wee problem, so I won’t be fixing it anytime soon.

    but your problem is just a CSS issue, not php

    in your sidebar you will have assigned CSS to style the links.
    I would think these links have classes, cause you will be roughly using the same sort of link look.
    well if so, add an id to your selected link, and style the id

    here is the code in html to show you that exact link of mine:

    Code:
    # February 5, 2009 at 4:44 pm

    Hi, thanks for helping but unfortunately I’m unable to do it this way because the code used for the header (which is where the menu code is) is the same throughout the entire site so I can’t add a "current" id to the specific menu item.

    That’s the reason why I’m using the page id and then referring to that in the css i.e.

    Code:
    body#blog ul#navlist li.blog a {color: #4daaf2;}
    # February 6, 2009 at 2:38 am
    "greencode" wrote:
    Hi, thanks for helping but unfortunately I’m unable to do it this way because the code used for the header (which is where the menu code is) is the same throughout the entire site so I can’t add a "current" id to the specific menu item.

    That’s the reason why I’m using the page id and then referring to that in the css i.e.

    Code:
    body#blog ul#navlist li.blog a {color: #4daaf2;}

    why did you put your links in the header?

    could you not just change your code so your header stops then add your html to the main content so you can style accordingly?

    if you can’t, then sorry I am not a php whizz to help you out, you may have to wait till someone else is better at that than me, or ask at wordpress

    # February 6, 2009 at 4:35 am

    The reason for keeping the nav in the header of the site is that the same navigation is used throughout the entire site and so if you ever need to amend, add or remove a menu item then you only need to change the single header file. Say, if you have a site that includes 500 pages (obviously that’s a bit of an extreme case) you would then only change 1 file instead of 500 pages.

    # February 6, 2009 at 9:45 am

    Umm, I found this code:

    Code:
    < ?php if ((!is_page())) { ?>

    < ?php } elseif ((is_page(’Home’)) || (is_page(’Studio’)) || (is_page(’Support’)) || (is_page(’About’)) || (is_page(’Contact’)))
    { ?>
    ”>
    < ?php } else { ?>

    < ?php } ?>

    But that’s still not quite right – almost but not quite :?

    # February 6, 2009 at 12:36 pm

    Okay, I’ve managed to solve the problem! It seems to work okay but I’m sure there must be a bit of a better way i.e. having an argument that says if anything comes in the "blog" directory then highlight blog in the menu otherwise highlight whatever appears in the url as per Chris Coyier’s code.

    So what I’ve done is add this to the functions.php WordPress file:

    Code:
    function the_slug() {
    $post_data = get_post($post->ID, ARRAY_A);
    $slug = $post_data[‘post_name’];
    return $slug;
    }

    Then added this, where the body tag normally sits in the header.php file:

    Code:
    < ?php if ((!is_page())) { ?>

    < ?php } elseif ((is_page('about')) || (is_page('contact')) || (is_page('what-we-do')))
    { ?>
    # February 6, 2009 at 12:43 pm
    "greencode" wrote:
    Okay, I’ve managed to solve the problem! It seems to work okay but I’m sure there must be a bit of a better way i.e. having an argument that says if anything comes in the "blog" directory then highlight blog in the menu otherwise highlight whatever appears in the url as per Chris Coyier’s code.

    So what I’ve done is add this to the functions.php WordPress file:

    Code:
    function the_slug() {
    $post_data = get_post($post->ID, ARRAY_A);
    $slug = $post_data[‘post_name’];
    return $slug;
    }

    Then added this, where the body tag normally sits in the header.php file:

    Code:
    < ?php if ((!is_page())) { ?>

    < ?php } elseif ((is_page('about')) || (is_page('contact')) || (is_page('what-we-do')))
    { ?>
    Viewing 12 posts - 1 through 12 (of 12 total)

    You must be logged in to reply to this topic.

    Projects

    Colophon

    CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.

    *May or may not contain any actual "CSS" or "Tricks".