How can I show 1 featured post in a styled element, and the next few below differently styled

I’m looking for some thoughts, ideas, and/or direction on what is the best way to accomplish this:

Basically I want to have 1 “featured” post in a differently styled div, and then display the next 3 below it.

Read More

I am using custom post types, so the built-in Sticky Posts feature won’t work, and I’d rather not use a plugin…

Here is a screenshot of what I’m trying to accomplish:
enter image description here

I haven’t done this in WordPress before so I’m not really sure where to begin. I assume I should set up a category or a tag called “featured” to trigger which posts will display at the top. But then how do I get it not to display in the regular feed?
I’m guessing I can probably disallow the “featured” tag or category, but that work-flow seems cumbersome (for the client to have to uncheck past featured posts for them to show back up in the regular feed then).

Related posts

Leave a Reply

1 comment

  1. One way to achieve this is to establish two queries/loops, one that handles the featured post and the other which handles all other posts (except the featured post).

    How you distinguish what IS and what is NOT to be a featured post could be handled by a special placeholder category or by the use of a custom field, the latter of which being more appropriate than cluttering up your category listings with placeholder categories that have no real value.

    So lets assume that for posts that you want to be featured that you assign a custom field with a meta_key of featured_post and a meta_value of 1.

    In your template file you would then do something similar to this;

    $args = array(
       'posts_per_page' => 1,
       'post_type' => 'your_post_type',
       'order' => 'DESC',  
       'meta_query' => array( 
          array(
             'key' => 'featured_post', 
             'value' => '1',
          )
       )
    );
    
    
    $first_query = new WP_Query( $args );
    if ( $first_query->have_posts() ):
       while( $first_query->have_posts() ) : $first_query->the_post();
    
            echo '<div class="featured_post">';
    
                //your desired output here....      
    
            echo '</div>';
    
       endwhile;
    endif;
    wp_reset_postdata();
    
    
    $args = array(
       'posts_per_page' => 9,
       'post_type' => 'your_post_type',
       'meta_query' => array( 
          array(
             'key' => 'featured_post', 
             'value' => '1',
             'compare' => 'NOT LIKE' //or NOT or != should suffice
          )
       )
    );
    
    
    $second_query = new WP_Query( $args );
    if ( $second_query->have_posts() ):
       while( $second_query->have_posts() ) : $second_query->the_post();
    
            echo '<div class="regular_posts">';
    
                //your desired output here....      
    
            echo '</div>';
    
       endwhile;
    endif;
    wp_reset_postdata();
    

    Some questions you might have…

    Q: What happens in the case where I assign (over time) more than one
    post as featured using the featured_post key and value 1 and forget to edit previously featured posts?

    In that case, the parameters; 'order' => 'DESC' shown in the first query that control the display of your featured post will show the most recent to be assigned the post meta key/value pairing based upon DATE in chronological order from the most recent post date to the eldest.

    Q: …but what happens if I want to show a featured post from a random
    date and where a post with a more recent date is already assigned the
    post meta key/value pair?

    In this case you will need to remember to remove the post meta key/value pair from any featured post that is newer by way of date so that an older post with the post meta key/value pair can take priority place.

    Q: Are there any other ways to do this?

    Sure are! Depending upon your requirements there are other ways we could assign featured posts for the first query that make managing changes potentially easier and this may include the use of custom constructed meta boxes that show you currently assigned featured post of this post type and provide a means to alter the featured post on a global fashion even if within the post edit screen. If your requirements exceed the above solution, we can look at this more closely.


    Some helpful Codex resources: