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')));
                _e('Archives', 'outspoken');
    </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 -->
  • You need to show use the get_template_part('content', get_post_format()); part of the code, most likely in the file content.php – Wyck Jan 25 '14 at 15:04

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;
  • Thanks, I tried this but it doesn't seem to be working. Not sure what I'm doing wrong. I have body.archive .hentry and I'm trying to change the article section within the .hentry. I've never used .less syntax, maybe that's where I'm making my mistakes. Here's the template I'm using outspoken.wpshower.com/category/fashion – user45652 Jan 26 '14 at 1:19
  • @user45652 Just edited the post and added some more detailed explanation – Borek Jan 26 '14 at 21:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.