Display different templates for parent-child

• creativeforge

• December 12, 2013 at 11:43 am

Hi,

I need to display a different template color for each of 4 categories. I have a custom field created called “color.” I can see the color in the parent edit page, but how to I case that color to DISPLAY on the parent and child pages? For example, I would expect the EDUCATE parent page to have a green background as selected in the dashboard.

http://musicmakesus.ca/neweng/educate/

As well as all the children pages from the EDUCATE page.

Thank you for any help!

Regards,

Andre

• Elliot

• December 12, 2013 at 1:18 pm

Hi @creativeforge

WP has a function called get_post_ancestors
http://codex.wordpress.org/Function_Reference/get_post_ancestors

This function will return an array containing all the parents for the given post.

I would use this function to find the parent for any given post/page. Then load the color value from that parent like so:

<?php 

$parent = get_the_ID();
$ancestors = get_post_ancestors( $parent );

if( !empty($ancestors) )
{
	$parent = end($ancestors)
}

$color = get_field('color', $parent);

?>

Thanks
E

• creativeforge

• December 13, 2013 at 5:31 am

Thank you Elliot!

However, I’m not at that level of expertise yet, so all this is a bit blurry for me. I thought using the plugin would be straightforward, but I have never used custom fields.

If you have a step by step example I’d greatly appreciate. For example, how many modifications will I have to do altogether? How many files, dashboard settings, etc. And does this mean I won’t use the plugin?

Thanks again!

Regards,

Andre

• Elliot

• December 13, 2013 at 11:01 am

Hi @creativeforge

I would love to help, but can’t spare the time at the movement to do a 1 on 1 WP training.

Please consult Google / WP for any general WP related questions and be sure to ask any specific ACF questions here.

Thanks
E

• creativeforge

• December 13, 2013 at 12:03 pm

I hoped someone else may have ideas or knowledge to share, Elliot. I’ve been Googling for hours today, and following links to text and videos, but again, most of what I find assumes you are more advanced and know what files you need to edit and what settings need to be made. It’s part of the reality out there. So much time wasted on research to end up feeling worse about yourself than when you start… 🙂

Basically: can this plugin do what I’m trying to do? I would appreciate knowing.

Thanks again,

Andre

• Elliot

• December 15, 2013 at 5:32 pm

Hi @creativeforge

Yes. This plugin can pretty much do anything relating to data.

In a previous comment, I have demonstrated the logic required to get the ‘parent’ color.

Thanks
E

• 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