How to style certain posts differently

  • breathelifein

    (@biellebrunner)


    8 years, 4 months ago

    Hi.
    I wanna style the blog posts in a way that posts 1, 2, 5 and 6 look a certain way, and posts 3 and 4 look a different way.
    I figured how to do that using something like,

    <?php $my_query = new WP_Query('showposts=6'); ?>
<?php $count = 0; ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
<?php $count++; ?> 

<?php if ($count == 3) : ?>
*style for the 3rd & 4th posts*

<?php elseif ($count == 4) : ?>
*style for the 3rd & 4th posts*

<?php else : ?>
*style for the other 4 posts posts*

    But is there a way to merge posts 3 and 4, since they’re supposed to look the same? I imagine there’s a quite simple way to do this, but I couldn’t figure it out…
    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • christomwebdesign

    (@christomwebdesign)

    8 years, 4 months ago

    Hi you should start looking into

    https://codex.wordpress.org/CSS

    neotechnomad

    (@neotechnomad)

    8 years, 4 months ago

    Would this work for you?

    <?php $first_query = new WP_Query( 'posts_per_page=2' ); ?>
<?php if ( $first_query->have_posts() ) : while ( $first_query->have_posts() ) : $first_query->the_post(); ?>

	<div id="post-<?php the_ID(); ?>" <?php post_class( 'style-one-class-name' ); ?>>
		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<?php if ( has_post_thumbnail() ) {
			the_post_thumbnail();
		} ?>
		<?php echo excerpt(30); ?>
	</div>

<?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php endif; ?>

<?php $second_query = new WP_Query( 'posts_per_page=2&offset=2' ); ?>
<?php if ( $second_query->have_posts() ) : while ( $second_query->have_posts() ) : $second_query->the_post(); ?>

	<div id="post-<?php the_ID(); ?>" <?php post_class( 'style-two-class-name' ); ?>>
		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<?php if ( has_post_thumbnail() ) {
			the_post_thumbnail();
		} ?>
		<?php echo excerpt(30); ?>
	</div>

<?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php endif; ?>

<?php $third_query = new WP_Query( 'posts_per_page=2&offset=4' ); ?>
<?php if ( $third_query->have_posts() ) : while ( $third_query->have_posts() ) : $third_query->the_post(); ?>

	<div id="post-<?php the_ID(); ?>" <?php post_class( 'style-one-class-name' ); ?>>
		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<?php if ( has_post_thumbnail() ) {
			the_post_thumbnail();
		} ?>
		<?php echo excerpt(30); ?>
	</div>

<?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php endif; ?>

    The different stylings are created by the “post_class( ‘style-one-class-name’ )” and “post_class( ‘style-two-class-name’ )” classes that you would create.

    ‘style-one-class-name’ would be for posts 1,2 and 5,6 and ‘style-two-class-name’would be for posts 3,4.

    ‘style-one-class-name’ and ‘style-two-class-name’ would be different sets of styles in your theme’s CSS style – such as ‘style-one-class-name’ could be named “blue-posts” and ‘style-two-class-name’ could be “red-posts”.

    This is from Codex: https://codex.wordpress.org/Function_Reference/post_class#Adding_More_Classes

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to style certain posts differently’ is closed to new replies.