Support » Fixing WordPress » Using is_page Conditional Tag for Page Specific CSS

  • InHouse

    (@inhouse)


    I’m trying to use “is_page” on my default page template to apply certain CSS to a specific page ID and all it’s children. I’m trying to avoid using many page templates. I followed the Conditional Tags Codex but I must not understand this or am missing something. I placed the sample code in my functions.php file.

    function is_tree( $pid ) {      // $pid = The ID of the page we're looking for pages underneath
        global $post;               // load details about this page
    
        if ( is_page($pid) )
            return true;            // we're at the page or at a sub page
    
        $anc = get_post_ancestors( $post->ID );
        foreach ( $anc as $ancestor ) {
            if( is_page() && $ancestor == $pid ) {
                return true;
            }
        }
    
        return false;  // we arn't at the page, and the page is not an ancestor
    }

    My default page template looks like this just to test. It is working to alter background colors but… All pages are yellow except page ID 11 which is orange. What am I doing wrong? Thanks so much!

    if ( is_home() ) {
        echo '<style type="text/css">body{background:black;}</style>';
    
    } elseif ( is_tree( '11' ) == $post->post_parent ) {
        echo '<style type="text/css">body{background:yellow;}</style>';
    
    } elseif ( is_tree( '37' ) == $post->post_parent ) {
        echo '<style type="text/css">body{background:orange;}</style>';
    
    } else {
    	echo '<style type="text/css">body{background:red;}</style>';
    }
Viewing 7 replies - 1 through 7 (of 7 total)
  • InHouse

    (@inhouse)

    Also, I was trying to avoid using the is_page( 'about' ) || '2' since there is a decent chance the page title/slug could change in the future and break the conditional.

    I’m guessing now that I was supposed to modify the functions code for the “is_tree” to work but I have no idea what is needed.

    Michael

    (@alchymyth)

    is_tree() only returns true or false; therefore you can’t use it to compare with a parent page id;

    can you describe with words what your conditional statements are supposed to do?

    how many pages are in your test site, and what is the relationship between those pages?

    InHouse

    (@inhouse)

    Thanks for replying alchymyth. The conditional statements are supposed to look to see if the current page is a certain ID or a child of that same ID. If either is true pass the given CSS styles.

    I thought that is what was meant by “To test if the parent of a page is a specific page, for instance “About” (page id pid 2 by default), we can use the tests in Snippet 3.” on the Codex.

    You could use the ancestors / parents {slug} for the children, just use the Body_Class(), in header.php look for the <body tag!

    UNTESTED:

    </head>
    
    <?php
    $class = '';
    if( is_page() ) {
    	global $post;
    	$parents = get_post_ancestors( $post->ID );
             /* Get the ID of the top most Page */
    	$id = ($parents) ? $parents[count($parents)-1]: $post->ID;
    	$parent = get_page( $id );
    	$class = $parent->post_name;
    }
    ?>
    <body <?php body_class( $class ); ?>>

    If you did not want to use the page slug, you could use a custom field eg: ‘body_class’, on the top level page and set the class in the post meta.

    </head>
    
    <?php
    $class = '';
    if( is_page() ) {
    	global $post;
    	$parents = get_post_ancestors( $post->ID );
    	$id = ($parents) ? $parents[count($parents)-1]: $post->ID;
    	$class = get_post_meta( $id, 'body_class', true );
    }
    ?>
    
    <body <?php body_class( $class ); ?>>

    HTH

    David

    Michael

    (@alchymyth)

    to see if the current page is a certain ID or a child of that same ID

    that is exactly what the is_tree() function would do (if I understand it properly);

    ...
    
    } elseif ( is_tree( '11' ) ) {
        echo '<style type="text/css">body{background:yellow;}</style>';
    
    } elseif ( is_tree( '37' ) ) {
        echo '<style type="text/css">body{background:orange;}</style>';
    
    } ...

    Can make it a little shorter!

    function is_tree( $pid ) {      // $pid = The ID of the page we're looking for pages underneath
        global $post;               // load details about this page
    
        if ( is_page($pid) )
            return true;            // we're at the page or at a sub page
    
        $anc = get_post_ancestors( $post->ID );
        return ( isset($anc) && in_array( $pid , $anc ) ) ? true : false;
        //is the $pid in the ancestors array
    }

    David

    InHouse

    (@inhouse)

    Hey guys, thanks so much for your help! It’s working this morning but I’m not sure what fixed it. For anyone interested my steps were:

    1. I updated the body class from
    <body <?php body_class( ); ?>>
    to
    <body <?php body_class( $class ); ?>>

    2. I updated my function to the suggestion made by Digital Raindrops above:

    function is_tree( $pid ) {      // $pid = The ID of the page we're looking for pages underneath
        global $post;               // load details about this page
    
        if ( is_page($pid) )
            return true;            // we're at the page or at a sub page
    
        $anc = get_post_ancestors( $post->ID );
        return ( isset($anc) && in_array( $pid , $anc ) ) ? true : false;
        //is the $pid in the ancestors array
    }

    3. I updated my page template to:

    } elseif ( is_tree( '24' ) ) {
        echo '<style type="text/css">body{background:orange;}</style>';

    Actually, I placed this conditional in my footer so it applies to all pages regardless of which page template it uses.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Using is_page Conditional Tag for Page Specific CSS’ is closed to new replies.