Multiple instances of Featured Image Query

Question

I have some custom code built into the header of my theme that gets the featured image from a post, displays the image and links to the posts permalink when clicked on by a user.

The problem I am having is that I have this happening on 2 different divs pulling in info from 2 different categories, but when you hover over the link as a user, it uses the permalink from only one of the two images. I am using the "page links to" plugin to redirect the post to a page in the site, so I wonder if this is causing an issue. Below is my snippet getting the featured image in 2 separate divs:

<div id="homeprint">
<a href="<?php the_permalink(); ?>">
<?php $the_query = new WP_Query( 'cat=100' );

// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
        the_post_thumbnail();
    }
endwhile; ?>
</a>           
</div>

<div id="lookup">
<a href="<?php the_permalink(); ?>">
<?php $the_query = new WP_Query( 'cat=101' );

// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
        the_post_thumbnail();
    }
endwhile;

// Reset Post Data
wp_reset_postdata(); ?>
</a>         
        </div>

Do I need to have two references of wp_reset_postdata(); or am I just doing this wrong?

The example is here in the header. You'll see two rectangular images that should link to two different pages. Right now they both link to the same location. Thank you all in advance.

Answer 1

For both loops move

<a href="<?php the_permalink(); ?>">

To after

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

the_permalink() is template tag and as such generates what it does, based on global $post variable. In your custom loop it doesn't contain the post you want until after $the_query->the_post() call.

Answer 2

After some pointers from my homie Rarst, I was able to make this work. I changed

this

<a href="<?php the_permalink(); ?>">
<?php $the_query = new WP_Query( 'cat=100' );

// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
        the_post_thumbnail();
    }
endwhile; ?>
</a>

to this

<?php $the_query = new WP_Query( 'cat=100' ); ?>

<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<a href="<?php the_permalink(); ?>">
    <?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
        the_post_thumbnail();
    }
endwhile; ?>
</a>  
<?php wp_reset_postdata(); ?>

As Rarst mentioned, the permalink wasn't doing as it should due to the fact that it was not placed inside the loop and after the post query. After the query was called, the permalink had a place to link to... the post thumbnail.

I'm still experimenting with php even though I've been creating Wordpress-driven sites for years now. There is always something to learn in the wonderful world of web design :)