Best way to style first post differently?

I am building a custom (child) theme and I want to style the first post of my loop in a different way than the others (bigger image, different position of some stuff).

Which is the best way of doing it? My “problem” is that my theme has support for different post types and the style would vary depending on the type of content, so I want to avoid repeating code as much as possible (i.e. using a function).

As I am a bit more used to OOP, my ideal scenario would be passing a variable to the view and check it in the loop of each content-type (that way I can re-use most of the code from the TwentyEleven templates). From what I know, that is not possible (please correct me if I am wrong).

For now, what I do is this:

function electric_index_loop($readMore = 0) {

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
    //Excluimos los "miniposts" (citas, estados, enlaces...) del listado
    'tax_query' => array(
        array(
            'taxonomy' => 'post_format',
            'field' => 'slug',
            'terms' => array('post-format-aside', 'post-format-link',
                'post-format-status', 'post-format-quote'),
            'operator' => 'NOT IN'
        )
    ),
    'posts_per_page' => 5,
    'paged' => $paged
);

// The Query
query_posts($args);

// The Loop
if (have_posts()) {
    $post_count = 0;
    global $more;
    $more = $readMore; // 0 fuerza que se muestre sólo el "excerpt", 1 fuerza que se muestre todo el contenido
    twentyeleven_content_nav('nav-above');
    while (have_posts()) {
        the_post();
        if ($post_count == 0) {
            get_template_part('highlight', get_post_format());
        } else {
            get_template_part('content', get_post_format());
        }
        $post_count++;
    }
} else {
    ?>
    <article id="post-0" class="post no-results not-found">
        <header class="entry-header">
            <h1 class="entry-title"><?php _e('Nothing Found', 'twentyeleven'); ?></h1>
        </header><!-- .entry-header -->

        <div class="entry-content">
            <p><?php _e('Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven'); ?></p>
            <?php get_search_form(); ?>
        </div><!-- .entry-content -->
    </article><!-- #post-0 -->
    <?php
}
wp_reset_query();}

As you see, I check the counter in the loop that I create in the function and ,if the current post is the first, I load a different template (“highlight”).
I’d have to create different templates for the different types of content (which, in some cases sucks, because I can get all I need in some cases with just a CSS class).

Well, is there a better way of doing these? Perhaps a hook or something?

Thanks in advance!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I think you can add an class to the [post_class()][1] function via Filter; the name, the string can you use form different values: tags or post title?

The follow example use the title of post and add this to the classes of post; if you use the post_class() function on post tag in markup. Also you can use other values for design this.

function fb_title_post_class( $classes ) {
    global $post;
    $classes[] = sanitize_title_with_dashes( get_the_title( $post->ID ) );
    return $classes;
}
add_filter( 'post_class', 'fb_title_post_class' );

Method 2

Ok, for now the best solution I’ve found is passing a global variable in my functions.php, as so:

while (have_posts()) {
        the_post();
        if ($post_count == 0 || is_sticky()) {
            global $highlight;
            $highlight = true;                
        }else{
            $highlight = false;
        }
            get_template_part('content', get_post_format());            
        $post_count++;
    }

And then, I check the variable in the views. That way I don’t need to create more files:

global $highlight;
?>
<article id="post-<?php the_ID(); ?>" <?php $highlight == true ? post_class('highlight') : post_class(); ?>> 
(more code)

If somebody thinks there’s a better solution than this, please let me know 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0