How to show first post differently from other posts?

Question

I created the design that will be used to show first post differently from the others. It's not that easy because the first post needs to be in his own div id, which is completely different from the other posts.

Here is the code I currently use in wordpress php:

<?php get_header(); ?>

<!-- Begin Content -->

<div id="content-wide">
  <div class="post">

    <div class="imgwide" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8)), url(<?php echo catch_that_image() ?>); background-repeat: no-repeat; background-size: 100%; background-position: center;">

      <div class="p-heading">
        <h1>
          <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
            <?php the_title(); ?>
          </a>
        </h1>
        <div class="p-content">
          Excerpt text of the first post goes here but php the_excerpt doesnt work for this wide paragraph
        </div>
      </div>

    </div>

  </div>
</div>

<div id="content-a">

  <?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
  <div class="post">
    <div class="imgdiv"><a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image() ?>" width="250"></a></div>
    <div class="p-heading">
      <h1>
        <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
          <?php the_title(); ?>
        </a>
      </h1>
    </div>

    <div class="p-content">
      <?php the_excerpt(); ?>
    </div>

    <div class="p-info">
      <?php the_time('j.m.Y') ?> |
      <?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12">
      <?php $totalcomments = get_comments_number(); echo $totalcomments; ?>
    </div>

  </div>

  <?php endwhile; ?>

and here is my site url http://www.virmodrosti.com/zdravje/ All I want is that first post isn't displayed twice, but is only moved to the wide post design. The big post is in content-wide. Let me know how to do that. Thank you.

I'm not familiar with WordPress and the PHP methods involved but it seems that if you can try adding something along the lines of ` [POST CONTENTS HERE] ` in your `while` loop. (in other words, add an `if` statement like @cmorrissey suggested) — Jonathan Lam, Jun 15 '17 at 15:26
Also see: https://stackoverflow.com/questions/18357231/if-first-post-style-differently-wordpress — Jonathan Lam, Jun 15 '17 at 15:28

PenAndPapers · Accepted Answer · 2017-06-16T07:17:48.430

try to add a counter that starts in zero and increment it inside your while loop, then use if else statement to check the value of counter if zero display the first post else the other posts.

EDITED

    <?php $counter = 0; ?>
    <?php while (have_posts()) : the_post(); ?>
        <?php if($counter == 0) { ?>
            <div id="content-wide">
                <div class="post">
                    <div class="imgwide" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8)), url(<?php echo catch_that_image(); ?>); background-repeat: no-repeat; background-size: 100%; background-position: center;">
                        <div class="p-heading">
                            <h1><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
                            <div class="p-content">
                                <?php the_excerpt(); ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php } ?>
        <?php if($counter > 0) { ?>
            <div class="post">
                <div class="imgdiv"><a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image() ?>" width="250"></a></div>
                <div class="p-heading">
                    <h1><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>
                <div class="p-content">
                    <?php the_excerpt(); ?>
                </div>
                <div class="p-info">
                    <?php the_time('j.m.Y') ?> |
                    <?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12">
                    <?php $totalcomments = get_comments_number(); echo $totalcomments; ?>
                </div>
            </div>
        <?php } ?>
        <?php $counter ++; ?>
    <?php endwhile; ?>

I tried that and received blank page, don't know why. I did exactly as specified. I don't know if two different div id's for first post and the rest posts fight with each other or because php if statements are located before div id where there are no html entries or something. Even if I add another id wrapper so that the code is inside the wrapper, it doesnt show first post, but only all together. Without this entry `` the page doesnt load, just returns empty page. — Techuser, Jun 16 '17 at 05:33
yes they are included in archive.php which applies for virmodrosti.com/zdravje/ — Techuser, Jun 16 '17 at 05:40
kindly enable error reporting on your wp-config file so we could see the errors that causing it — PenAndPapers, Jun 16 '17 at 05:49
error_reporting(E_ALL); ini_set('display_errors', 1); define( 'WP_DEBUG', true); — PenAndPapers, Jun 16 '17 at 05:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146820/discussion-between-techuser-and-penandpapers). — Techuser, Jun 16 '17 at 05:56

How to show first post differently from other posts?

1 Answers1