WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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


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?

share|improve this question
up vote 2 down vote accepted

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') {
     } elseif($post_type == 'two_col') {
     } else {

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.

share|improve this answer

Your Answer


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.