2

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?

1 Answer 1

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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