0

I would like to show latest posts with its thumbnails only in slider. But my first figure element has a class. Can I apply a class to first thumbnail as it is in html structure below? And then Can I auto increment other images, when a user publish a new post with thumbnail?

    <div class="diy-slideshow">
            <figure class="show">
<!-- last recent thumbnail -->
                <img src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg" width="100%" />
            </figure>
          <figure>
<!-- second from the last -->
            <img src="<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
            the_post_thumbnail_url();} ?>" width="100%" />
            </figure>
    <!-- the rest will go on endless -->
    <figure>
    <!-- other latest posts thumbnails -->
    </figure>
          <span class="prev">&laquo;</span>
          <span class="next">&raquo;</span>
        </div>

My question is that how can I display other latest post thumbnail in <figure></figure>, the above code displays only last latest posts thumbnail, I would like to go on showing thumbnails without limitation.

The structure I was trying to create:

<div class="diy-slideshow">
                <figure class="show">
    <!-- last recent thumbnail -->
                </figure>
              <figure>
    <!-- second from the last -->
                </figure>

        <figure>
        <!-- thirth from the last -->
        </figure>
       <figure>
        <!-- fourt, fifth,sixth ... from the last -->
        </figure>
              <span class="prev">&laquo;</span>
              <span class="next">&raquo;</span>
            </div>

Thank you in advance!

0

You can achieve this by developing custom code like following. You can find more information about WP_Query here https://codex.wordpress.org/Class_Reference/WP_Query

<?php
$args = array( 'posts_per_page' => 100, 'meta_key' => '_thumbnail_id', 'ignore_sticky_posts' => 1 );

// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {

    while ( $the_query->have_posts() ) {
        $the_query->the_post();

        if ( has_post_thumbnail() ) { ?>
            <figure <?php if ( $the_query->current_post == 0 && ! is_paged() ){ echo 'class="show"';  } ?> >
                <img src="<?php the_post_thumbnail_url(); ?>" />
            </figure>
        <?php }
    }

    /* Restore original Post Data */
    wp_reset_postdata();
}
?>
  • This code displays latest posts thumbnails but how can exclude the last resent thumbnail and display it in <figure class="show"> <!-- last recent post thumbnail --> </figure> – DaF-Student May 18 '17 at 13:32
  • I have changed above code to achieve it. – Vinod Dalvi May 18 '17 at 13:46
  • Maybe I could not explain what I want to do, your codes retrives the thumbnails of latest posts perfectly, In my case there are two figure tags. First one has a class name that is "show". I'm trying to put the thumbnail of last post in it for the first image of slider. – DaF-Student May 18 '17 at 14:13
  • Actually you don't need to use two separate figure tags if if there is only class difference in it. In my shared code i used only one figure tag but applied show class to first figure tag of first slider image. – Vinod Dalvi May 18 '17 at 14:21
  • I asked that question because my slider would't work properly if first figure has not got a class name "show". Then I used this jQuery code: //Add Class to first element of slider $('.diy-slideshow figure').each(function(i) { if ( i === 2 ) { $(this).addClass('show'); } }); it worked, but I could not the class "show" on first figure. But anyway slider worked. Now I'll try again your solution. – DaF-Student May 18 '17 at 14:28
0

Use WP_Query() to get all posts. Then loop through these posts and generate intended html.

$args = array(
    'post_status' => 'publish',
    'posts_per_page' => -1,
);
$query = new WP_Query($args);
if ($query->have_posts()):
    while ($query->have_posts()) : $query->the_post();
        //html with <figure> to get the_post_thumbnail_url();
    endwhile;
endif;

Make sure to put necessary arguments and check for syntax errors. Code not tried or tested.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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