Recent posts and first featured

Question

I have the code below to list the recent posts on my site. It's working fine.

I need to style differently the first post (bigger image and bigger title).

Any idea how ?

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array( 'post_type' => 'post', 'posts_per_page' => 10, 'paged' => $paged );
$wp_query = new WP_Query($args);
while ( have_posts() ) : the_post(); ?>
    <div class="main-content span12">
        <div class="main-content span4">
            <!--Image article-->
            <img src="<?php the_post_thumbnail_url( 'medium' ); ?>">
        </div>
        <div class="main-content span8">
            <!--Titre article-->
            <h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
            <!--Extrait article-->
            <?php the_excerpt(__('(more…)')); ?>
        </div>
    </div>
<?php endwhile; ?>

Answer 1

The easiest way would be using CSS, so you don't have to change the PHP. Assuming you have a or some other wrapping element that contains all your posts, you could use something like

.main-content.span12 img {
    width:50%;
    height:auto;
}
.main-content.span12 h4 {
    font-size:1em;
}
.main-content.span12:first-child img {
    width:100%;
}
.main-content.span12:first-child h4 {
    font-size:2em;
}

:first-child will get only the first child of the parent element - so it will apply to only the first <div class="main-content span12">.

Answer 2

This is quite difficult to answer without knowing exactly what you are looking for, but let's take a look at what you can do.

Option 1

You can create a file named content-featured.php in your template's directory, and put your custom structure inside it. Then, call the template file in your loop:

    if ( have_posts() ) :
        /* Start the Loop */
        while ( have_posts() ) : the_post();
            /*
             * Include the Post-Format-specific template for the content.
             * If you want to override this in a child theme, then include a file
             * called content-___.php (where ___ is the Post Format name) and that will be used instead.
             */
            get_template_part( 'content','featured' );
        endwhile;
        endif;

This way, you don't have to touch anything but the newly created template file.

Option 2

Change the structure of your provided code. I assume you are using some sort of bootstrap-like styling sine you've got the span4 and span12 classes. Here is what you can do:

The class main-content span12 is where your content is being wrapped. This is at max width, since they width is set to span12 (judging by the names). It will have a width of 100%.

Moving to the next element, the DIV with the class main-content span4. Here is where your image is rendered. You can increase the size of it by using span5 or span6 instead. But remember to change the next DIV's width respectively so they match for a total of 12. So if you use span5, you should use span7 for your next DIV.

If you want a bigger image, you can use a larger thumbnail size:

<img src="<?php the_post_thumbnail_url( 'large' ); ?>">

Now move onto the next element and decrease the width of it by using span7 instead of span8. Your content is stored here.

the_excerpt() returns a short part of your content. If you want to show the full content, use the_content() instead.

Changing the <h4> to a lower or higher value can also decrease/increase the size of your header.

After all, if it's not enough, you can append a custom class to your DIV and then style if afterward:

div class="main-content span12 my-class">
        <div class="main-content span4 my-class-image">
            <!--Image article-->
        </div>
        <div class="main-content span8 my-class-content">
            <!--Titre article-->
            <h4>...</h4>
            <!--Extrait article-->
        </div>
    </div>

This way the classes are unique for your featured article. Using a CSS then can help you style it:

.main-content.my-class{
    //Your desired style
}
.main-content.my-class-image {
    //Your desired image size
}
.main-content.my-class-image img {
    //You can even set the image's size specifically here 
}

I hope this helps you get a better understanding of styling WordPress's posts.