How can I display recent posts from a particular category in my header?

Question

Question: Category Display

I'm trying to create a header that pulls data from the most recent 3 posts in a specific category along with pulling the image associated for the most recent post (if there is one) to display. I can create the styling just fine, but I don't know how to reference and pull the post information. I don't want to do a loop because I don't want all posts.

I'm thinking of something along these lines.

POST IMAGE (overlayed with the title of the most recent post of a category, which is a link to that category, possibly referencing the date and time of the post) Under that, I want to put just text links to the post just prior to that within the category followed by a third link to the post prior to that one.

Are there specific tags to pull post titles and perhaps small post excerpts and display them like this?

Clarification: what I'm looking to do is redesign my main page so that the upper portion is broken into four sections, top left, top right, bottom left and bottom right. Each of these will be the image of the most recent post in specific categories overlaid by a link to the most recent post. Then, with each of these is a list of the next two posts in the category. The formatting is done through CSS, which I can handle, but I don't know how to pull posts from specific categories and how to pull only the most recent three.

Answer 1

You do want to "do a loop".

Within your header you want to make a fresh query for just those three posts and loop through them without upsetting the main query that you need further down each page.

Here's a standard loop calling three posts from your category:

$wpse_235359_query = new WP_Query( array( 

        'category_name' => 'your-category-slug',
        // should pull in posts from child categories too

        'posts_per_page' => 3 

    ) );

if ($wpse_235359_query->have_posts()) :

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

        /* show your post stuff here using standard
           template tags like the_title()
        */

    endwhile;

endif;

wp_reset_postdata();

Calling wp_reset_postdata at the end sets everything back nicely so the rest of your page behaves as expected.

You put this snippet of code anywhere in your theme files that you'd like to show this bundle of posts. That can be in a child theme if you're basing your theme upon another, or in the main theme files if you're building the whole theme.

Edit - additions from the comments to keep the comment list shorter

Call the variable $wpse_235359_query anything you like. Use the snippet multiple times with different categories if you wish.

Place it where you want, using a child theme so you can still update your parent theme. The child theme works by overriding whole template files in the parent. So you copy the parent header.php into the child theme, modify it, and the child header.php is used by WP instead of the parent header.php. A call to load header.php will always look in the child theme first.

Then to style the first differently, using HTML like this:

<div>
    <span class="MainCategoryHeader">
    <a href="http://www.example.com/">Permalink One</a>
        </span>
    <span class="MainCategoryHeader">
        <a href="http://www.example.com/">Permalink Two</a>
    </span>
    <span class="MainCategoryHeader">
        <a href="http://www.example.com/">Permalink Three</a>
    </span>
</div>

Apply CSS like this:

.MainCategoryHeader:first-child a { 
    background-color: #FFFFFF; 
    color: #FFFF00; 
} 
.MainCategoryHeader a { 
    background-color: #FFFFFF; 
    color: #000000; 
}

This has strayed a long way from WordPress and the main point of the original question now though. If you're happy that the WordPress part is solved then please do accept the answer, not just for my benefit but to keep the site tidy too.