WordPress.org

Ready to get started?Download WordPress

Forums

Using is_page Conditional Tag for Page Specific CSS (8 posts)

  1. inhouse
    Member
    Posted 1 year ago #

    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>';
    }
  2. inhouse
    Member
    Posted 1 year ago #

    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.

  3. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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?

  4. inhouse
    Member
    Posted 1 year ago #

    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.

  5. Digital Raindrops
    Member
    Posted 1 year ago #

    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

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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>';
    
    } ...
  7. Digital Raindrops
    Member
    Posted 1 year ago #

    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

  8. inhouse
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic