Color Div based on Parent Term from CPT. WordPress

• SOLVED

I am currently displaying posts from a CPT. Each has a taxonomy term from a parent. I would like to create a function that would color the background of a div of particular parent terms.

Here is my set up:

Lets call this Jobs:

Art
--Illustrator --Story Board --Painter

Camera
--Photographer --Camera Operator --Technician

Construction
--Carpenter --Tree Trimmer

The parent is Art, Camera, Construction.

My posts displays as follows:

Illustrator
Post Title
Post Content

Technician
Post Title
Post Content

Etc.

My goal is to color the DIV that the child term is held in. For example:


<div class="job_type">Illustrator</div> (background green)
Post Title<br>
Post Content<br>

<div class="job_type"> Photographer </div> (background red)
Post Title<br>
Post Content<br>
I am trying to construct the following:

if (parent_term == 'art'){
.car_type{
background-color:green;
}
}

if (parent_term == 'camera'){
.car_type{
background-color: red;
}
}


I did receive a reply to this posted elsewhere, and here is the code I was helped with, which makes sense:


function my_colors( $classes, $class, $postid ) {

// Custom Tax
if ( 'jobs' == get_post_type( $postid ) ) {
foreach ( (array) get_the_terms( $postid, 'department' ) as $term ) {
if ( empty( $term->slug ) )
continue;
$classes[] = 'term-' . sanitize_html_class( $term->slug, $term->term_id );
}
}
}
add_filter( 'post_class', 'my_colors', 10, 3 );


Then I can use something like:


<div <?php post_class(); ?>>


which will return:

<div class="term-mydepartmentTerm">


Now, I am using wp-types to display my loop, and I cannot use php in the plug in. I am able to use shortcodes.

So, I will need to get the above code to be able to do:


<h1 [my_shortcode] >


so [my_shortcode] converts to:


<h1 class="term-mydepartmentTerm">


If you prefer to tackle this using another method, feel free. I hope this isn't confusing.

Thanks!!!

Answers (1)

2013-11-13

Duncan O'Neill answers:

Hi, do you have a link to your site? Depending on the classes added, this may be more easily do-able via CSS.

best,

---

armando comments:

Yes, but the issue is that the posts are going to be dynamic, so not sure how it will be added via CSS since its part of a loop.

I can give you the dev URL via direct contact.

---

Duncan O'Neill comments:

Following on from the above, in the css;


.term-mydepartmentTerm { background:green;}
.term-mydepartmentTerm2 { background:red;}
.term-mydepartmentTerm3 { background:grey;}

/* etc */


---

Duncan O'Neill comments:

Please send me a private message. thanks.

---

Duncan O'Neill comments:

[email protected] if you want my direct email. cheers.