Title: Custom Post Type – Styling Posts Differently
Last modified: August 21, 2016

---

# Custom Post Type – Styling Posts Differently

 *  [kikimarie123](https://wordpress.org/support/users/kikimarie123/)
 * (@kikimarie123)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/custom-post-type-styling-posts-differently/)
 * Having trouble getting a solution for this. I have a custom post type and I need
   to style the posts differently.
 * The first post should have its own class, the next three posts should have their
   own class, and then the rest don’t need a unique class.
 *     ```
       <div class="first-post">POST CONTENT</div>
       <div class="second-post">POST CONTENT</div>
       <div class="third-post">POST CONTENT</div>
       <div class="fourth-post">POST CONTENT</div>
       <div>POST CONTENT</div>
       <div>POST CONTENT</div>
       ```
   
 * Here is what my code looks like right now:
 *     ```
       <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   
       <?php
       $destinations = get_posts(array(
       	'meta_query' => array(
       		array(
       			'key' => 'destination',
       			'value' => '"' . get_the_ID() . '"',
       			'compare' => 'LIKE'
       		)
       	)
       ));
       ?>
   
       <?php if( $destinations ): ?>
       <?php foreach( $destinations as $destination ): ?>
       <?php $post_class = ('alpha' == $post_class) ? 'omega' : 'alpha'; ?>
       <?php $photo = get_field('main_image', $destination->ID); ?>
   
       <div class="<?php echo $post_class; ?>">
       	<div <?php post_class($style);?> id="post-<?php the_ID();?>">
       		<div class="post-entry">
       		<a href="<?php echo get_permalink( $destination->ID ); ?>">
       			<?php echo get_the_post_thumbnail( $destination->ID, 'grid-thunb' ); ?>
       		</a>
   
       		<h2 class="post-title"><a href="<?php echo get_permalink( $destination->ID ); ?>">
       		<?php echo get_the_title( $destination->ID ); ?>
       		</a></h2>
   
       		<p><?php $customLength=20; echo get_the_excerpt(); ?></p>
   
       </div>
       </div><!-- end of #post-<?php the_ID(); ?> -->
       </div><!--end of post class -->
       <?php endforeach; ?>
       <?php endif; ?>
       ```
   
 * Really appreciate the help! Thanks!

Viewing 1 replies (of 1 total)

 *  Moderator [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * (@keesiemeijer)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/custom-post-type-styling-posts-differently/#post-4191399)
 * Try it with a counter. place `<?php $count = 0; ?>` before the loop
 *     ```
       <?php $count = 0; ?>
       <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
       <!-- rest of the loop -->
       ```
   
 * And where you want your post class you can use something like this:
 *     ```
       <div<?php echo ( ++$count >= 4 ) ? 'class="post-' . $i . '"' : ''; ?>>
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘Custom Post Type – Styling Posts Differently’ is closed to new replies.

## Tags

 * [custom post type](https://wordpress.org/support/topic-tag/custom-post-type/)
 * [styling posts](https://wordpress.org/support/topic-tag/styling-posts/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [keesiemeijer](https://wordpress.org/support/users/keesiemeijer/)
 * Last activity: [12 years, 8 months ago](https://wordpress.org/support/topic/custom-post-type-styling-posts-differently/#post-4191399)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics