Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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:

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.

share|improve this question
    
Assign some class for your anchor depending upon the post type and add some css for changing the background for each of your post type. –  Rohit Pande Jan 10 '13 at 10:11

3 Answers 3

up vote 1 down vote accepted

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;    
}
share|improve this answer
    
Doesn't work... –  Mihad Aiko Jan 10 '13 at 13:15
    
you will need to add strtolower function for making this thing work. use it like <a href="<?php echo get_post_type( $post->ID ); ?>" class="<?php echo str_replace(' ', '-', strtolower(get_post_type( $post->ID ))); ?>"> <?php $post_type = get_post_type_object( get_post_type($post) ); echo $post_type->label ; ?> </a> –  Rohit Pande Jan 10 '13 at 13:18
    
Sorry I am not that advanced :( –  Mihad Aiko Jan 10 '13 at 13:19
    
Is working now? or you are still facing the difficulties? –  Rohit Pande Jan 10 '13 at 13:22
    
Its working now lol –  Mihad Aiko Jan 10 '13 at 13:43

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.

share|improve this answer
    
I realized that a little too late lol –  Mihad Aiko Jan 10 '13 at 12:56
    
It's never too late, you can use the magic of SQL and bulk edits to fix it, but eitherway just using post_class should give you what you need to start writing CSS selectors, no need for all the trickery in the other answers –  Tom J Nowell Jan 10 '13 at 13:01
    
I have no idea how to write that code –  Mihad Aiko Jan 10 '13 at 13:12
    
I used post_class but how do i get it to change on label –  Mihad Aiko Jan 10 '13 at 13:17
    
post_class adds the css classes you need, you can now do it via basic CSS selectors just like all the other answers, but I cant comment any further until I see which element you put the post_class call on –  Tom J Nowell Jan 10 '13 at 14:59

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; }
share|improve this answer
    
this doesn't work either –  Mihad Aiko Jan 10 '13 at 13:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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