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.
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.
This should return the results as
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):
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