the code I am using below will show the last 5 post in whatever category I choose, but I was wondering, How can I get it so that the first post shows different from the other 4?
I want the first post to show the thumbnail and the title under it and the rest to show titles. I found a code on a recent post on here but it's closed, so I couldn't comment and ask questions.
Here is the code I'm using
<?php
$queryObject = new Wp_Query( array(
'showposts' => 5,
'post_type' => array('post'),
'category_name' => videos,
'orderby' => 1,
));
// The Loop
if ( $queryObject->have_posts() ) :
$i = 0;
while ( $queryObject->have_posts() ) :
$queryObject->the_post();
?>
<?php if ( $i == 0 ) : ?>
<div class="first-post">
<?php endif; ?>
<a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
<?php the_post_thumbnail('sidethumbs'); ?>
</a>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php if ( $i == 0 ) : ?>
</div>
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
It's working but the problem is, I don't know where to begin the second styling or how to begin it which the person failed to explain, can anyone help me.
the code I am using below will show the last 5 post in whatever category I choose, but I was wondering, How can I get it so that the first post shows different from the other 4?
I want the first post to show the thumbnail and the title under it and the rest to show titles. I found a code on a recent post on here but it's closed, so I couldn't comment and ask questions.
Here is the code I'm using
<?php
$queryObject = new Wp_Query( array(
'showposts' => 5,
'post_type' => array('post'),
'category_name' => videos,
'orderby' => 1,
));
// The Loop
if ( $queryObject->have_posts() ) :
$i = 0;
while ( $queryObject->have_posts() ) :
$queryObject->the_post();
?>
<?php if ( $i == 0 ) : ?>
<div class="first-post">
<?php endif; ?>
<a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
<?php the_post_thumbnail('sidethumbs'); ?>
</a>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php if ( $i == 0 ) : ?>
</div>
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
It's working but the problem is, I don't know where to begin the second styling or how to begin it which the person failed to explain, can anyone help me.
Share Improve this question edited Nov 3, 2020 at 13:26 knilkantha 115 bronze badges asked May 29, 2013 at 4:32 user32447user32447 8351 gold badge12 silver badges16 bronze badges2 Answers
Reset to default 2The code you posted will only make difference in adding <div class="first-post"></div>
for the first post, so it still displays same information for all posts.
Try this instead:
<?php
$queryObject = new Wp_Query( array(
'showposts' => 5,
'post_type' => array('post'),
'category_name' => videos,
'orderby' => 1,
));
// The Loop
if ( $queryObject->have_posts() ) :
$i = 0;
while ( $queryObject->have_posts() ) :
$queryObject->the_post();
if ( $i == 0 ) : ?>
<div class="first-post">
<a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
<?php the_post_thumbnail('sidethumbs'); ?>
</a>
<?php else: ?>
<div class="secondary-post">
<?php endif; ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?>
</a>
</div>
<?php $i++;
endwhile;
endif;
The code you show wraps your first post in a <div class='first-post'>...</div>
element. You can add styles to it in your theme's CSS file(s) (either style.css
or a custom one if you're loading custom styles):
div.first-post {
/* First Post styles here */
/* for example, if you want the text to be **bold** */
font-weight: bold;
}