Wordpress Technology

Wordpress Tips, Tutorials, Hacks

Highlight First Post

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!


Both comments and pings are currently closed.

© 2009 | Made by Vancouver Web Design | Internet Marketing