WordPress.org

1. kpow
   Member
   Posted 2 years ago #

   Can anyone point me to a good tutorial on formatting the first post of the loop differently than the rest of the posts?

   Example: have the first post a wider image, with the full text from the article, and have the rest of the posts just a title, thumbnail, and a
   "read more" button.

2. Dagon Design
   Member
   Posted 2 years ago #

   That is fairly easy to do. Here is some info to get you started.

   First, in your index.php file, look for the start of the loop. It will probably look something like this:

   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

   Before it, add this:

   $post_num = 0;

   And then right after, add this:

   $post_num++;

   Then all you have to do is add conditionals for adding different CSS classes. Since $post_num increments for each post, it will be 1 for the first. So you could do something like this:

   if ($post_num == 1) {
      do whatever for the first post
   } else {
      do stuff for the other posts
   }

   That will cover the index page. You can re-produce it for the search.php, archives.php, etc.

   Hope that helps.

Topic Closed

This topic has been closed to new replies.