Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Color Div based on Parent Term from CPT. WordPress


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:

--Illustrator --Story Board --Painter

--Photographer --Camera Operator --Technician

--Carpenter --Tree Trimmer

The parent is Art, Camera, Construction.

My posts displays as follows:

Post Title
Post Content

Post Title
Post Content


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'){

if (parent_term == 'camera'){
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 ) )
$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.


Answers (1)


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.


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:

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