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(
            '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

// 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
    while (have_posts()) {
        if ($post_count == 0) {
            get_template_part('highlight', get_post_format());
        } else {
            get_template_part('content', get_post_format());
} 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 -->

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!

2 Answers 2


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' );
  • That's interesting, I'll have to try it, though I don't know if it will fit my needs 100%
    – Cmorales
    Commented Feb 29, 2012 at 18:07
  • If I add a filter... wouldn't I get that class with every post (every time post_class() is called)? I only want it for the first one.
    – Cmorales
    Commented Mar 4, 2012 at 22:31
  • You can count about the Loop global $wp_query; echo $wp_query->current_post; and also you have an var for the result $wp_query->post_count You must add the logic befor return the new class to this filter; current exampel give always feedback to the post_class()
    – bueltge
    Commented Mar 5, 2012 at 7:34
  • Sorry, but I don't understand the second part. Could you provide an example?
    – Cmorales
    Commented Mar 6, 2012 at 12:57

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

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

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 :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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