Support » Fixing WordPress » Need to style first post on first page differently (incl. Foundation classes)

  • Hi,

    Apologies if this is a repost but I couldn’t find anything that really covered what I’m trying to do. I’ll try to summarise my problem briefly…

    I’m trying to style the first post on my front page loop differently from the rest. I know that’s not an uncommon request, but it has to apply to only the first post of the first page.

    Not only have I been unable to get that working, I also haven’t figured out how to apply Foundation classes to it, so the first post is eg. large-12 columns and the rest are either large-6 columns or part of a block grid.

    My current loop is as follows…

    <?php
                $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
                $query_args = array(
                  'post_type' => array ('post' , 'reviews'),
                  'posts_per_page' => 10,
                  'paged' => $paged
                );
                $the_query = new WP_Query( $query_args );
              ?>
    
              <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <div>
                  <h1><?php echo the_title(); ?></h1>
                  <div class="excerpt">
                    <?php the_excerpt(); ?>
                  </div>
                </div>
              <?php endwhile; ?>
    
              <?php if ($the_query->max_num_pages > 1) { ?>
                <nav class="prev-next-posts">
                  <div class="prev-posts-link">
                    <?php echo get_next_posts_link( 'Older Entries', $the_query->max_num_pages );  ?>
                  </div>
                  <div class="next-posts-link">
                    <?php echo get_previous_posts_link( 'Newer Entries' );  ?>
                  </div>
                </nav>
              <?php } ?>
    
              <?php else: ?>
                <article>
                  <h1>Sorry...</h1>
                  <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
                </article>
              <?php endif; ?>

    That should also be including multiple custom post types and pagination.

    I’m pretty lost here and would greatly appreciate any suggestions. I’m no php expert by any means so any help would be fantastic. I also considered two loops: one to pull in the first post, another to pull in the rest. Not sure if that’s a better solution?

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Update: I’ve managed to add a class to the first post so I’m halfway there but still haven’t solved the solution of having different Foundation classes.

    My loop now looks like this…

    <?php
                // set up or arguments for our custom query
                $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
                $query_args = array(
                  'post_type' => array ('post' , 'reviews'),
                  'posts_per_page' => 10,
                  'paged' => $paged
                );
                // create a new instance of WP_Query
                $the_query = new WP_Query( $query_args );
              ?>
    
              <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); // run the loop ?>
                <div class="<?php if(!is_paged() && ($counter==0)) { echo 'featured-post large-12 columns'; $counter++; } ?> post">
                  <h1><?php echo the_title(); ?></h1>
                  <div class="excerpt">
                    <?php the_excerpt(); ?>
                  </div>
                </div>
              <?php endwhile; ?>
    
              <?php if ($the_query->max_num_pages > 1) { // check if the max number of pages is greater than 1  ?>
                <nav class="prev-next-posts">
                  <div class="prev-posts-link">
                    <?php echo get_next_posts_link( 'Older Entries', $the_query->max_num_pages ); // display older posts link ?>
                  </div>
                  <div class="next-posts-link">
                    <?php echo get_previous_posts_link( 'Newer Entries' ); // display newer posts link ?>
                  </div>
                </nav>
              <?php } ?>
    
              <?php else: ?>
                <article>
                  <h1>Sorry...</h1>
                  <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
                </article>
              <?php endif; ?>

    WordPress has a nifty little function post_class() for echoing all the necessary classes for a post. Just put this function in your class attribute like so:

    class="<?php post_class(); ?>"

    Now WordPress will show all the necessary classes like post type, category etc.

    To add your own classes you can use the post_class filter:

    function prefix_add_featured_class($classes){
        global $wp_query;
        if( $wp_query->current_post == 0 ){
            $classes[] = 'featured-post';
        }
    }
    add_filter('post_class', 'prefix_add_featured_class');
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Need to style first post on first page differently (incl. Foundation classes)’ is closed to new replies.