CSS for Custom Post Types

Question

How do I assign CSS to custom post types so it displays different from other Custom Post Types?

Example:

Custom Post Type 1: Row of 4 Images

Custom Post Type 2: a 2 column with an Image in the left column and text in the right column

How would I do this?

Answer 1

In your post loop, you could always set a class name that is the equivalent to the slug of the custom post type and then adjust the css accordingly.

You'd need to add the post_class() function to the html element containing each post.

For this option, you'll want to get the post type first:

 <?php $post_type = get_post_type($post->ID); ?>

And then you'll want to add the post type to the html element containing your post using post_class():

 <?php post_class($post_type); ?>

Or, you could use some conditional logic to check the post type and then output them in two completely different ways inside of your loop.

Personally, just because I like having more control over things, I would set up the if statement in my loop so that I could adjust the output based on the post type.

Every theme is different, but something like this should get you on the right track:

if (have_posts()) : while (have_posts()) : the_post();
     $post_type = get_post_type($post->ID);
     if($post_type == 'four_img') {
          get_template_part('content','four_img');
     } elseif($post_type == 'two_col') {
          get_template_part('content','two_col');
     } else {
          get_template_part('content',get_post_format());
     }
endwhile;
endif;

You'd need to create the content-four_img.php file and content-two_col.php file in my example, but you could just code the mark up right into the loop if that's more what you prefer.