Different style for first two (sticky) posts

Question

I'm currently facing a few loose ends while dealing with the homepage of a theme I am working on. I got my loop set up to show the most recent posts in a certain style and it works perfectly.

Now I am trying to position two sticky posts (or even posts from a certain category) on top of that loop, utilizing different styling and showing only a thumbnail and the headline. I want them to be up there no matter how old they are and want the regular loop to begin just below of them. Like on a typical magazine website, the top content stays where it is while the blog content below gets new posts more often. Please see attached draft.

I really don't know how to incorporate the two posts above my loop. I'd really appreciate any hint in the right direction where to start.

Answer 1

I think you should add a css class and in your loop, put a $i and let $i run, if $i == 2 then you add the css class attribute to that sticky post.

$i = 0;
while( have_posts() ):
         the_post();
   $i++;
   if($i == 2):
      $css_class = 'top-sticky';
   else:
      $css_class = ''; 
   endif;

endwhile;
wp_reset_postdata();

Answer 2

You first need to have some way of marking these posts as they might change in time. Your best bet is to use a "special" tag (like featured) like Jetpack's Featured Content module does (it also gives you a nice way of deciding what tag to use via the Customizer).

After you have that setup, you use a custom query loop and display only those posts above the regular loop.

To keep those featured posts out of the regular/main loop, you need to use the pre_get_posts action hook and, depending on certain conditions (maybe you only show the featured posts on your homepage - is_home(), not in category or tags archives), you exclude those posts by setting the post__not_in WP_Query parameter.