Support » Fixing WordPress » Collect thumbnails in page top

  • Hi

    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?


Viewing 4 replies - 1 through 4 (of 4 total)
  • Michael


    Forum Moderator

    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()

    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.

    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?



    Forum Moderator

    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; ?>

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

    Best regards

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Collect thumbnails in page top’ is closed to new replies.