Reply To: Display different templates for parent-child

• creativeforge

• December 15, 2013 at 5:47 pm

OK, so here is the solution I applied:

1- In functions.php, I added this code near the top, right under:

//* Child theme (do not remove)
define( 'CHILD_THEME_NAME', 'Generate Theme' );
define( 'CHILD_THEME_URL', 'http://my.studiopress.com/themes/generate' );
define( 'CHILD_THEME_VERSION', '1.0.2' );
$content_width = apply_filters( 'content_width', 570, 450, 880 );

Here is the code I inserted:

//* Add custom body class to the head
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {
 global $post;
 if ( is_page( '4' ) || (isset($post->post_parent) && $post->post_parent == 4)){
   $classes[] = 'educate-class';
  }

 if ( is_page( '12329' ) || (isset($post->post_parent) && $post->post_parent == 12329)){
   $classes[] = 'advocate-class';
  }

 if ( is_page( '12330' ) || (isset($post->post_parent) && $post->post_parent == 12330)){
   $classes[] = 'celebrate-class';
  }

 if ( is_page( '12331' ) || (isset($post->post_parent) && $post->post_parent == 12331)){
   $classes[] = 'connect-class';
  }

  return $classes;
}

2- I created the 4 classes to insert in my style.css file AT THE VERY BOTTOM of the file, after everything (Generate theme has a double closing }, so right AFTER that). Here is what it looks like :

/* EDUCATE pages - different background */
.educate-class {
    background: #84b855;
	}

.educate-class #inner {
 background-color: #84b855;
}

.educate-class #wrap {
 background-color: #6a9544;
}

/* ADVOCATE pages - different background */

.advocate-class {
    background: #f28c4d;
	}

.advocate-class #inner {
 background-color: #f28c4d;
}

.advocate-class #wrap {
 background-color: #dc5b0b;
}

/* CELEBRATE pages - different background */

.celebrate-class {
    background: #e09ddc;
	}

.celebrate-class #inner {
 background-color: #e09ddc;
}

.celebrate-class #wrap {
 background-color: #cd66cc;
}

/* CONNECT pages - different background */

.connect-class {
    background: #c2afe6;
	}

.connect-class #inner {
 background-color: #c2afe6;
}

.connect-class #wrap {
 background-color: #673bb8;
}

3- I select the appropriate parent for each child-page in the dashboard, so they will display the specific color.

Voila! Hope this helps someone else, this is by far the simplest and most effective way I’ve seen of doing it.

Regards,

Andre