Separate CSS for WordPress Parent & Child Pages

I’ve recently gotten my first web job through Andrew’s company. They are paying me to convert their existing site to a WordPress site to make it easier for them to manage. For the most part, this hasn’t been a difficult job. The original company used Dreamweaver to make the site and while that doesn’t excuse the amount of mistakes that were present, it certainly explains a lot of it.

To put it simply, they have several sections of content that required separate CSS files. This would be fine on a HTML site but for WordPress, this proved to be a bit more difficult than I expected. Obviously, there isn’t an actual file for every page so any theme development had to be through the one header page. My mission was to set a different CSS file for each section or parent page and its children.

Thanks to Reddit, I was able to accomplish this without much hassle 1.

Here’s what needed to be done.

I added this code to my functions template. It tests for a parent page and an ID, if there is one.

function is_subpage() {
    global $post;
    // load details about this page

    if ( is_page() && $post->post_parent ) {
    // test to see if the page has a parent
        return $post->post_parent;
        // return the ID of the parent post

    } else {
    // there is no parent so ...
        return false;
        // ... the answer to the question is false
    }
}

I then added the following code to the header file where you would normally put the link to your CSS.

<?php if (is_page('imaging' ) || '51' == $post->post_parent ) { ?>
       // If the page is "Imaging" or the parent of the page is
       // "Imaging" (Imaging has a page ID of 51)
       <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/viewmont-imaging.css" type="text/css">
 <?php } else { ?>
       <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
 <?php } ?>

To break it down. If the page is “Imaging” or has a parent with the ID of 51 (Imaging), use this stylesheet. Otherwise, use the main stylesheet.

If you are like me, you probably don’t use the default permalinks. For me, to get the page IDs of all the pages I needed custom stylesheets for, I had to change my permalinks to the default ones. Then I went and viewed each page from the Dashboard. Once I collected all the page IDs, I went back to my code and set them for Imaging, Physical Therapy, Labs, etc.

My final code looked like this: (I suggest viewing “plain text” below)

<?php if (is_page('imaging' ) || '51' == $post->post_parent ) { ?>
       <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/viewmont-imaging.css" type="text/css">
 <?php } elseif (is_page('labs' ) || '332' == $post->post_parent ) { ?>
       <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/viewmont-labs.css" type="text/css">
 <?php } elseif (is_page('pt' ) || '382' == $post->post_parent ) { ?>
       <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/viewmont-pt.css" type="text/css">
 <?php } elseif (is_page('sleep' ) || '396' == $post->post_parent ) { ?>
       <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/viewmont-sleep.css" type="text/css">
 <?php } elseif (is_page('primemed' ) || '547' == $post->post_parent ) { ?>
       <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/viewmont-primemed.css" type="text/css">
 <?php } else { ?>
       <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
 <?php } ?>

After I did that, I then added the following code to my functions file. This is to help carry out the above instructions. This function will return true if you are looking at the correct page and display the correct stylesheet.

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 aren't at the page,
                   // and the page is not an ancestor
}

It was fairly simple. After I set the CSS I was able to go back, using the overall same code, to set my menu and banner images for different sections.

While looking for this answer, I ran into several people who tried to point me in the direction of using the body class. While I’m sure this would have worked, I have no experience using it. So, I’m just mentioning it for those who might want to accomplish this in a different way.

I hope this helps someone as it’s rather an easy fix if you know what to look for.

  1. Once I was sent the link anyway. I spent 7 days trying to google it every which way.
>> SHARE: | | <<

1 Comment

  1. Edyth Oedekerk says:

    CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). **

    All the best to you
    <http://www.caramoanpackage.com

Leave a Reply

CommentLuv badge

Yours Truly

Hi! I'm Randi, an aspiring web design mastermind. I'm a 20-something blogger and web design and development student living in NEPA. I have 9+ years of experience in HTML and CSS and a bit in PHP. I started creating websites at 12 and have since turned my favorite hobby into a (almost) career. I spend my time creating pretty web stuff, blogging, playing video games, or reading. This site will reflect my life online. To read more about my offline life, go here. ♥

More?



Subscribe by email:


Sponsored


Last Tweets


Fatal error: Cannot use string offset as an array in /home/randi/public_html/wp-content/plugins/really-simple-twitter-feed-widget/really_simple_twitter_widget.php on line 418