Grow your CSS skills. Land your dream job.

[Solved] Dynamic Body IDs – Advanced

  • # September 13, 2009 at 6:57 pm

    I’m trying to create a dynamic navigation menu like the one from video screencast #36 "Current Nav Highlighting: Using PHP to set Body ID." Here’s where I run into problems;

    I need to target two different divs based on the one Body ID. One div is for the menu and the other is for a background image that is associated with the menu. I found a few different methods for doing accomplishing this and the one I’m using currently can be found below.

    Code:
    < ?php
    $current_page = $post->ID;
    $parent = 1;

    while($parent) {
    $page_query = $wpdb->get_row(“SELECT post_name, post_parent FROM $wpdb->posts WHERE ID = ‘$current_page’”);
    $parent = $current_page = $page_query->post_parent;
    if(!$parent) $parent_name = $page_query->post_name;
    }
    ?>

    this code is followed by

    Code:
    “>

    I found this method at http://perishablepress.com/press/2009/05/26/dynamic-body-class-id-php-wordpress/.

    This method works great for me until I view a single post.

    Here is a live example of my problem; If you click the Artist link, then the link to the Coffee Pot post, you can see my menu acts appropriately up to a certain point.

    http://trombonetranscriptions.com/wordpress/transcriptions/

    When viewing the ‘coffee pot’ post (http://trombonetranscriptions.com/wordpress/transcriptions/artists/j-j-johnson/coffee-pot/), I used FireBug and noticed the the Body ID was being outputted as ‘blog.’ (because of the php in the Body tag above) I don’t have any CSS setup to handle this ID, therefore, my menu doesn’t look correct when viewing this post.

    The reason I don’t have any CSS setup to handle this is because my visitors will be linked to single posts from two different pages. When they click on a link for a single post in the Transcriptions area, I need the menu to act accordingly. Ditto for when they click on a link for a single post in the Articles area.

    Hopefully this makes sense so far…

    Possible solutions?

    Is there a way I can dynamically set the ID based on the category a post is in? Correct me if I’m wrong, but I think that would help my solve my problem.

    I think another way to solve this problem would involve a variation of this code:

    Code:
    < ?php
    $url = explode('/', $_SERVER['REQUEST_URI']);
    $dir = $url[1] ? $url[1] : 'home';
    ?>

    http://trombonetranscriptions.com/wordpress/transcriptions/artists/etc/etc/etc because they will be in the parent category of "Transcriptions." Can the above code be modified so that it just grabs the "transcriptions" dir and ignores everything after that?

    PHP is VERY new to me, and my head hurts just trying to explain all of this. If there’s anything I can do to clarify, please let me know… Also, please pardon the styling mess in the live examples as this is obviously a work in progress. I hope there is someone out there that can help!

    # September 14, 2009 at 12:19 am

    Definitely check out the body_class() function.

    <body <?php body_class(); ?>>

    That will probably give you all the hooks you need to do it right.

    # September 14, 2009 at 1:22 am

    Thanks Chris.

    I checked out the body_class function when I read about Method 9 at http://perishablepress.com/press/2009/05/26/dynamic-body-class-id-php-wordpress/. I’m just not familiar enough with PHP to figure out how to apply it to my specific situation…

    For example:

    When I use <body <?php body_class(); ?>> in my header.php I get an output of single postid-38 as the Body ID when viewing the single post of "coffee pot" (from my original message above). This isn’t enough of a hook I don’t think…

    Is there code that I can put in <?php body_class(); ?>> that spits out the category of the post I’m viewing? I only see the category in my Body ID when viewing the archives of a specific category…

    I’m reading Jeff’s article about the body_class_plus function at http://digwp.com/2009/08/wordpress-body-class-plus/ and wondering if maybe my answer is in here…

    # September 14, 2009 at 1:59 am

    I’m using

    function body_class_plus() {
    if(function_exists(‘body_class’)) {
    ob_start(); body_class();
    $class = ob_get_contents();
    ob_end_clean();
    if($class) {
    if(preg_match("/home/", $class)) {
    echo ‘class="home"’;
    } elseif(preg_match("/transcriptions/", $class)) {
    echo ‘class="transcriptions"’;
    } elseif(preg_match("/articles/", $class)) {
    echo ‘class="articles"’;
    } elseif(preg_match("/resources/", $class)) {
    echo ‘class="resources"’;
    } else {
    echo ‘class="no-body-class-matches"’;
    }
    } else {
    echo ‘class="body-class-not-available"’;
    }
    }
    }

    in my functions.php

    and

    <body <?php if(function_exists(‘body_class_plus’)) { body_class_plus(); } ?>>

    in my header.php

    but it comes back as

    <body class="no-body-class-matches">

    every time…

    if i’m viewing the url http://trombonetranscriptions.com/wordp … offee-pot/ shouldn’t it find the /transcriptions/ and output it to the body class?

    # September 14, 2009 at 10:10 pm

    i’m still struggling with this…

    for some reason it is working for the /home/ part but nothing else.

    i feel like i’ve tried a million different things and am stuck. any ideas?

    is it possible to view php files from a site like i’m able to view html and css? if i could see a working example i could probably figure this out.

    # September 14, 2009 at 10:47 pm

    GOT IT!!! Thank goodness…

    Here’s what it looks like.

    Code:
    < ?php
    $url = explode('/',$_SERVER['REQUEST_URI']);
    $dir = $url[1] ? $url[1] : 'home';
    ?>

    http://digwp.com/2009/05/unique-body-ids-for-your-pages/

    I just needed to change the 1s to 2s to grab the correct directory.

    So this method is going to work for my current project, however, I would still like to learn the other way of doing this using the body_class/body_class plus if anyone is up for teaching me how.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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