Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

While creating our portfolio i'd like to make a dynamic header with the latest 5/6 featured images in a row. All these posts come out of the 'apps' custom post type.

<div id="header">
        <div class="latest_post"> <img src="featured image" class="class-name" /></div>
        <div class="second_post"> <img src="featured image" class="class-name" /> </div>
        <div class="third_post"> <img src="featured image" class="class-name" /> </div>
        <div class="fourth_post"> <img src="featured image" class="class-name" /> </div>
        <div class="fifth_post"> <img src="featured image" class="class-name" /> </div>
 </div>

How would I create something like this?

Thanks in advance.

share|improve this question

2 Answers 2

up vote 4 down vote accepted

First setup a WP_Query to fetch the latest 5 posts from your custom post type "apps". You also need to update a "counter" for each post in the loop. Then simply echo the count in the class for the div.

<?php
//Query posts
$query = new WP_Query(array(
    'post_type' => 'apps',
    'posts_per_page' => 5
));
//Reset counter
$count = 0;
?>

<?php if ($query->have_posts()) : ?>

<div id="header">
    <?php while ($query->have_posts()) : $query->the_post(); ?>
    <?php $count++; //update count ?>
        <div class="post_<?php echo $count; //prints the class as "post_XX" ?>">
            <?php if( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
        </div>
    <?php endwhile; ?>
</div>

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

This should return the results as

<div class="post_1"><img src=".." /></div>
<div class="post_2"><img src=".." /></div>
<div class="post_3"><img src=".." /></div>
<div class="post_4"><img src=".." /></div>
<div class="post_5"><img src=".." /></div>
share|improve this answer
    
And this also worked perfect. Thing is I like naming classes myself instead of 1/2/3/4/5. Again thank you jzatt for helping out. –  rwzdoorn Nov 15 '12 at 8:40

one secondary loop with WP_Query(); use the loop counter $query->current_post to output those five css classes from an array;

example (based on the code by jzatt):

<?php
$query = new WP_Query(array(
    'post_type' => 'apps',
    'posts_per_page' => 5,
    'meta_key' => '_thumbnail_id'
));
$css_classes = array( 'latest', 'second', 'third', 'fourth', 'fifth' ); ?>

<?php if ($query->have_posts()) : ?>

<div id="header">
    <?php while ($query->have_posts()) : $query->the_post(); ?>
        <div class="<?php echo $css_classes[$query->current_post%5]; ?>_post"> <?php the_post_thumbnail('thumbnail',array('class' => 'class-name' )); ?> </div>
    <?php endwhile; ?>
</div>

<?php endif; wp_reset_postdata(); ?>

adjust 'thumbnail' to your featured image size; for 6 posts, change to posts_per_page' => 6,, add a further 'sixth' element to the array of css classes, and change $query->current_post%5 to $query->current_post%6

share|improve this answer
    
Nice addition of the classes! Just curious, is there any advantage of doing: $featured = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' ); echo $featured[0]; instead of just the_post_thumbnail('thumbnail'); –  jzatt Nov 13 '12 at 13:19
    
you are right: there is possibly no advantage, as you could define your own css classes via the $attr parameter - the_post_thumbnail('thumbnail',array( 'class' => 'class-name' )); –  Michael Nov 13 '12 at 13:42
    
@Michael This worked like a charm! Thank you so much! –  rwzdoorn Nov 15 '12 at 8:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.