Wordpress Technology

Sometimes we have a need to highlight the first post in loop of main page, archive page or search page and apply different style for it. This output can be implemented by using special CSS class and simple php code.

Originally we have the regular loop to output our posts:

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>

		<div class="post">
			...
		</div>

	<?php endwhile; ?>
<?php endif; ?>

In order to change the style of the first post, the class ‘first’ must be added to it.

<?php $i = 0; ?>
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<?php $i++ ?>

		<div class="post<?php if ($i == 1) echo ' first'; ?>">
			...
		</div>

	<?php endwhile; ?>
<?php endif; ?>

Next, using class ‘first’ we can define the rules for class ‘first’.

Simple enough!

Leave a trackback from your own site.