Give each post type label a different color?

Question

On my homepage I am using a code to call different post type labels. Example:

TV Series: "Once Upon A Time"

Here is the code I use to call the label:

<a href="<?php echo get_post_type( $post->ID ); ?>">
    <?php $post_type = get_post_type_object( get_post_type( $post ) );
    echo $post_type->label; ?>
</a>

I want to place each post type in a div with different background colors. Example:

Do you see how once upon a time has a different background from pretty little liars? I also want to be able to make the link color different.

Answer 1

You can do something like this:

<a href="<?php echo get_post_type( $post->ID ); ?>" class="<?php echo str_replace(' ', '-', get_post_type( $post->ID )); ?>">
     <?php $post_type = get_post_type_object( get_post_type($post) ); echo $post_type->label ; ?>
</a>

and in your CSS part you can do something like:

.pretty-little-liars
{
   background color: khaki;
}

.once-upon-a-time
{
   background color: blue;    
}

Answer 2

Use this code to retrieve the label instead:

$post_type = get_post_type_object( get_post_type( $post ) );
printf (
    '<div class="%1$s"><a href="%2$s" class="%1$s">%3$s</a></div>',
    esc_attr( sanitize_title_with_dashes( $post_type->label, '', 'save' ) ),
    esc_url( get_post_type( $post->ID ) ),
    esc_html( $post_type->label )
);

You can then style the individual post type wrappers and links:

 /* background color on div wrappers */
div.pretty-little-liars { background color: green; }
div.once-upon-a-time {  background color: blue; }

/* link colors */
a.pretty-little-liars { background color: white; }
a.once-upon-a-time {  background color: yellow; }

Answer 3

If you have been using the post_class function as you should be, it will have added a CSS class of the form type-posttypeslug such as type-post type-page or type. You can then use this in your CSS selectors.

However, looking at your screenshot would indicate that you're using custom post types incorrectly. e.g. you have a pretty little liars post type and a once upon a time post type. This is bad practice, and a potential headache and time drain in the future.

Instead consider using a custom taxonomy and the term APIs. Then you can add term meta to specify colours. It would be easier to use once complete, more portable, easier to code templates for, and easier to maintain.