Collect thumbnails in page top (5 posts)

  1. CharltonM
    Posted 3 years ago #


    I´m on my first wordpress attempt and is struggling with thumbnails. I´ve searched around but not found anything that can help me yet.

    What I´m trying to do is to get a thumbnail from each post and put it in the top of the page so that there will be a grid of thumbnails used as an overview of all the posts on the page, and by clicking the thumb you get scrolled down to the post.

    How is this possible? Is there some sort of plugin or is it a few lines of code I need to write?


  2. Michael
    Forum Moderator
    Posted 3 years ago #

    what theme are you working with?

    is that the front page you are talking about?

    in header.php, use the loop to show all posts with thumbnails;
    create post links as anchor links to the posts on the same page;
    finish the code with rewind_posts() http://codex.wordpress.org/Function_Reference/rewind_posts

    in the main loop, make sure that each post div has a unique css id, possibly created from the post ID.

    details may follow when you provide more information about what you have so far.

  3. CharltonM
    Posted 3 years ago #

    I´m creating a new theme from scratch, I used a blank template so there´s pretty much nothing there except for my design.

    Yes, the layout on the front page is


    <Block of thumbnails>



    As it is now, I get a thumbnail above every post, but i want to collect all the thumbs from the posts and move them to a block of thumbnails above the posts.

    Is it better if I use an existing theme where these functions are already implemented?

  4. Michael
    Forum Moderator
    Posted 3 years ago #

    loop for the block of thumbnails (you will need to add html tags and css for the formatting);


    <div id="top">&nbsp;</div>
    <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
    <a href="#post-<?php the_ID(); ?>"><?php the_post_thumbnail('thumbnail',array( 'title' => 'link to '.the_title_attribute('echo=0'))); ?></a>
    <?php endwhile; endif; rewind_posts(); ?>

    loop for the posts (you will need to add html tags and css for the formatting):

    <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php //whatever you want to output for the full post// ?>
    <h3><?php the_title(); ?></h3><?php the_post_thumbnail(); ?>
    <a href="#top">&uarr; back to top</a>
    </div><!-- #post-<?php the_ID(); ?> -->
    <?php endwhile; endif; ?>


  5. CharltonM
    Posted 3 years ago #

    Thank you! I think I can work it from here.

    Best regards

Topic Closed

This topic has been closed to new replies.

About this Topic