Pre-Defined CSS ID's for Most Recent Posts WordPress

• SOLVED

I'm not sure how to word what I want.

This is what I have:

<ul id="dock">
<?php
$dock = new WP_Query();
$dock->query( 'showposts=5' );
while( $dock->have_posts() ) : $dock->the_post();
?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<img src="<?php bloginfo( 'template_directory' ); ?>/imgsize.php?w=69&h=54&img=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>" alt="<?php the_title(); ?>" />
</a>
<span><?php the_title(); ?></span>
</li>
<?php
endwhile;
?>
</ul>



Which gives me this for output:

<ul id="dock">
<li>
<a href="#"....>
<img src="#".... />
</a>
<span>Post Title</span>
</li>
<li>
<a href="#"....>
<img src="#".... />
</a>
<span>Post Title</span>
</li>
<li>
<a href="#"....>
<img src="#".... />
</a>
<span>Post Title</span>
</li>
<li>
<a href="#"....>
<img src="#".... />
</a>
<span>Post Title</span>
</li>
<li>
<a href="#"....>
<img src="#".... />
</a>
<span>Post Title</span>
</li>
</ul>


as expected.


ALL I WANT is for the output to add a "pre-defined" id to each <li> tag.

IE:
<li id="positionA"><a href="#"><img src="#"><span>SPAN</span></li>
<li id="positionB"><a href="#"><img src="#"><span>SPAN</span></li>
<li id="positionC"><a href="#"><img src="#"><span>SPAN</span></li>
<li id="positionD"><a href="#"><img src="#"><span>SPAN</span></li>
<li id="positionE"><a href="#"><img src="#"><span>SPAN</span></li>


The most recent 5 posts will always be called, and the most recent post must always be "positionA," while the 5th most recent post must always be "positionE."

Thanks in advance.

Answers (3)

2010-05-20

Monster Coder answers:

<ul id="dock">

<?php

$dock = new WP_Query();

$dock->query( 'showposts=5' );
$pos = array('A','B','C','D','E');
$i=0;
while( $dock->have_posts() ) : $dock->the_post();

?>

<li id="position<?php echo $pos[$i]; ?>">

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">

<img src="<?php bloginfo( 'template_directory' ); ?>/imgsize.php?w=69&h=54&img=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>" alt="<?php the_title(); ?>" />

</a>

<span><?php the_title(); ?></span>

</li>

<?php
$i++;

endwhile;

?>

</ul>

---

Tim Greenwood comments:

This is the one, works perfect. Thanks so much. Fast and dead on.

2010-05-20

Lew Ayotte answers:

In your wordpress loop do something like this:


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

$i = 1;
if ($i <= 5) {
?>
<li id="position<?php echo $i; ?>"><a href="#"><img src="#"><span>SPAN</span></li>
<?php
$i++;
}

//other stuff

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


2010-05-20

Roberto Mas answers:


<ul id="dock">
<?php
$count = 0
$dock = new WP_Query();
$dock->query( 'showposts=5' );
while( $dock->have_posts() ) : $dock->the_post();
$count ++
?>

<li id="position<?php echo $count ?>">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<img src="<?php bloginfo( 'template_directory' ); ?>/imgsize.php?w=69&h=54&img=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>" alt="<?php the_title(); ?>" />
</a>
<span><?php the_title(); ?></span>
</li>

<?php
endwhile;
?>
</ul>