CSS for Custom Post Types

1 comment

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.

   Log in to Reply