0

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 Cars:

Domestic
--Dodge --Ford --Chrysler

Import
--Honda --Toyota --Kia

European
--BMW --Benz

The parent is Domestic, Import, European.

My posts displays as follows:

Ford
Post Title
Post Content

Toyota
Post Title
Post Content

Etc.

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

<div class="car_type">Ford</div> (background green)
Post Title<br> 
Post Content<br>

<div class="car_type">Toyota</div> (background red)
Post Title<br> 
Post Content<br>

I am trying to construct the following:

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

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

So far I have checked out get_terms. Any help pointing me in the right direction would be amazing.

Thank you, I hope this makes sense.

0

You'll have to adjust the markup to suit your specific needs, but the easiest solution would use a post_class filter on the post_class() template tag, to output appropriate classes.

For example, in your template, you need to call post_class(), such as:

<div <?php post_class(); ?>>
<div class="car_type">Ford</div> (background green)
Post Title<br> 
Post Content<br>
</div>

Then, filter post_class, using your term:

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

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

This will turn this:

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

...into this:

<div class="term-carTaxTerm">

(along with other classes, of course)

And you can target your CSS accordingly.

  • Thank you for this, I believe this is what I was looking for. Quick question, I am using a plugin to display my loop (lazy i know :) and it doesn't accept php code. If I would like to make this into a shortcode, will it still work? So it will be something like: <div [my_shorts]> Thanks! – user1457514 Nov 12 '13 at 22:39
  • That's really a tough question to answer without knowing the Plugin code or how it does what it does. That might work, or you could create your own Custom Page Template. – Chip Bennett Nov 12 '13 at 22:45
  • I am using the Views plugin from wp-types. It can take short codes and execute them within the plugin. If I take what you wrote and turn it into short code, so I use something like <div [my_shorts]> so it replaces [my_shorts] with <?php post_class(); ?>. I really appreciate your help. – user1457514 Nov 12 '13 at 22:48
0

Modified as shortcode:

function my_color_heading( $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->parent, $term->term_id );
     $classList = implode(" ",$classes);
     return "class= {$classList}";

        }

    }

}
add_shortcode('heading_colors','my_color_heading');

Thanks!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.