Dynamic body classes

  • I’m frustrated beyond all belief right now. I’ve been trying to apply different CSS to the body of different page groups and I’m losing my mind. Forgive me, but I’m well versed in HTML & CSS, but php has never been a strength of mine. This project is a freebie for my church.

    I need to apply a different style to specific pages (not posts) and their child subpages. I’ve tried using built-in body classes, such as page-child parent-pageid-(id) in CSS and just can’t get it to work and I’ve tried darn near every method listed on Perishablepress’s (https://perishablepress.com/press/2009/05/26/dynamic-body-class-id-php-wordpress/ ) site.

    What I’d like is to style a parent (and children) with a body class of .church, another parent and their children with .school, and another parent/children with .daycare. All of the forums and blogs out there say it is sooo simple with dynamic body classes (which I believe), but I just can’t seem to get it figured out. Any input, thoughts, suggestions are much appreciated. Thanks in advance.

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

  • a link would help to illustrate which body classes are already present – if you use body_class()

    otherwise, build your own body classes:
    – find the parent page of the child pages, or the parent themselves;
    – either use the page slug directly, or make a css class depending on the page name or id;

    example, assuming that body_class() is not used:
    in header.php; instead of
    <body>

    insert:

    <?php if($post->post_parent)
{ $top_page = get_post($post->post_parent); }
else
{ $top_page = $post; }
$top_page_name = $top_page->post_name;
?>
<body<?php if($top_page_slug) { echo ' class="' . $top_page_name . '"'; ?>>

    only for one generation parent-child (no grandchildren);
    that will work if your parent pages are called ‘church’, ‘school’ and ‘daycare’ (with or without capital letters);

    Thread Starter pgapepper

    (@pgapepper)

    Thanks for the quick response, alcymyth. The site is currently located at trinity.versiostudios.com while it’s being built and sandboxed. I should have included the url (sorry) in the original post. I’ll try and implement your solution, but what would happen if the .church class needs to apply to all pages, except those specified as parent/child of posts 30 or 32? Grandchildren will exist also. I would think it’d be a simple if / elseif / else, right?

    there is a typo in the above – correction here:

    <?php if($post->post_parent)
{ $top_page = get_post($post->post_parent); }
else
{ $top_page = $post; }
$top_page_name = $top_page->post_name;
?>
<body<?php if($top_page_name) { echo ' class="' . $top_page_name . '"'; ?>>

    to take care of the grandchildren, see: https://cssglobe.com/post/5812/wordpress-find-pages-top-level-parent-id/

    if .church is the default body class (for pages and for all other templates, such as archives (?)) –
    then something like this might work:
    revised code (should take care of grandchildren and the default class):

    <?php if($post->post_parent)
{  $ancestors=get_post_ancestors($post->ID);
   $root=count($ancestors)-1;
   $parent = $ancestors[$root];
   $top_page = get_post($parent); }
else
{ $top_page = $post; }
$top_page_name = $top_page->post_name;
if ( $top_page_name != 'school' && $top_page_name != 'daycare' ) $top_page_name = 'church';
?>
<body<?php if($top_page_name) { echo ' class="' . $top_page_name . '"'; ?>>
    Thread Starter pgapepper

    (@pgapepper)

    Leaving the following in:

    if (apply_filters('thematic_show_bodyclass',TRUE)) {
    Creating the body class
    ?>

    (or taking it out – either way it makes no difference)
    and replacing <body class="<?php thematic_body_class() ?>"> with

    <?php if($post->post_parent)
{  $ancestors=get_post_ancestors($post->ID);
   $root=count($ancestors)-1;
   $parent = $ancestors[$root];
   $top_page = get_post($parent); }
else
{ $top_page = $post; }
$top_page_name = $top_page->post_name;
if ( $top_page_name != 'school' && $top_page_name != 'early-childhood-education' ) $top_page_name = 'trinity';
?>
<body<?php if($top_page_name) { echo ' class="' . $top_page_name . '"'; ?>>

    results is the following error:

    Parse error: syntax error, unexpected $end in ……/wp-content/themes/thematic/header.php on line 96

    As an aside, I am oviously using the thematic theme as a framework (I also changed the naming conventions of the classes to match page slugs already in place). Thanks again for all of your help.

    my bad – ??
    i think a missing closing } of the if statement in the <body line is the cause for the parse error (corrected below):

    <?php if($post->post_parent)
{  $ancestors=get_post_ancestors($post->ID);
   $root=count($ancestors)-1;
   $parent = $ancestors[$root];
   $top_page = get_post($parent); }
else
{ $top_page = $post; }
$top_page_name = $top_page->post_name;
if ( $top_page_name != 'school' && $top_page_name != 'early-childhood-education' ) $top_page_name = 'trinity';
?>
<body<?php if($top_page_name) { echo ' class="' . $top_page_name . '"'; } ?>>
    Thread Starter pgapepper

    (@pgapepper)

    I skimmed through the code a couple of times and didn’t see missing close. Either way, you are a rockstar and I owe you a beer. Viewing the source code after the fix, all pages are assigned the appropriate body classes. Again, thanks for all your help – I owe you big!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Dynamic body classes’ is closed to new replies.