First post article different on Archives template

Question

Hi I'm trying to make the first post article in the list different for the archive template. Basically they'd all be in order descending, but the first post in the list would be styled differently. Other people have said they've done it but the coding is much different and I don't know how to change the first post using the php in my theme.

I want the first post to show the thumbnail and the title larger than the rest. Here is the basic code I'm using. Thanks in advance for any help!

get_header(); ?>

    <header class="archive-header">
        <h1 class="archive-title"><?php
            if (is_day()):
                printf(__('Daily Archives: %s', 'outspoken'), get_the_date());
            elseif (is_month()):
                printf(__('Monthly Archives: %s', 'outspoken'), get_the_date(_x('F Y', 'monthly archives date format', 'outspoken')));
            elseif (is_year()):
                printf(__('Yearly Archives: %s', 'outspoken'), get_the_date(_x('Y', 'yearly archives date format', 'outspoken')));
            else:
                _e('Archives', 'outspoken');
            endif;
            ?></h1>
    </header><!-- .archive-header -->



<?php /* The loop */ ?>

<?php while (have_posts()): the_post(); ?>
    <?php get_template_part('content', get_post_format()); ?>
<?php endwhile; ?>

    <?php outspoken_paging_nav(); ?>

    <?php get_template_part('content', 'none'); ?>

</div><!-- #content -->

Answer 1

Just point to the first element of your list of articles using CSS pseudo class like this: PS. I'm so used to less that I'm gonna give you the .less syntax, but you can figure it out on your own right?

.container-with-your-posts {
    > .post-container {
        &:first-child {
            h1 {
                your styles for the title
            }

            img {
                your styles for the thumb
            }
        }
    }
}

This will work in IE8 if you declare the doctype. If you don't care about the IE8 (and you really shouldn't) you can also use :nth-child(1)

Edit: Ok I can see in the comment below you are struggling with less so here you go - I'll use CSS. Since you want to have this on archives we start with that:

.archive {
}

Then let's select the posts container:

.archive #content {
}

Now let's select all articles (posts):

.archive #content article {
}

And narrow it down to the first one:

.archive #content article:first-child {
}

Now to be sure we will not point other articles in the content (unlikely, but still - better safe than sorry) let's add a direct child selector. As said it's a bit overkill but what the heck:

.archive #content > article:first-child {
}

So now you are in the first article (post) in your archives list. Now you can narrow it down as precise as you want (going one selector at a time) or just from here you can go like this for the thumbnail:

.archive #content > article:first-child .entry-thumbnail {
    width: //set your width;
}

and like this for the title:

.archive #content > article:first-child .entry-title {
    font-size: //set your size;
}