5 ways to highlight your first post in your WordPress theme

der Loop in WordPress

5 ways to highlight the first post or the first article in your WordPress Theme. I’m sure there are more than 5 ways, but I
love them. ;)

This is one of my “draft posts”. ;) One of my gathering place. Subscribe to this post because if I find out a new way to highlight my first post I would like to edit and complete this article.

Let’s start:


1.


<h3>highlight the 1.post on every page</h3>


<?php if(have_posts()) : the_post() ?>
              your stuff
<?php endif; ?>

<?php while(have_posts()) : the_post() ?>
              your stuff
<?php endwhile; ?>

2.

highlight the 1st post only on the 1st page

first post:full content, without more link

all other posts:only the excerpt


<?php if (have_posts()) : ?>
		
		<?php while (have_posts()) : the_post();$first++; ?>
<?php if ( 1 == $first && is_home() && !is_paged() ) { 
  the_content();
} else {

 the_excerpt(); 
} ?>

<?php endwhile; endif; ?>

3.

highlight 1st post only on the 1st page – another option

<?php global $paged $counter = 1; if(have_posts()) : while(have_posts()) : the_post();
 if ($counter == '1' && ($paged == '' || $paged < 2)) { ?>
                   your stuff
  <?php $counter++;
  } else { ?>
                your stuff
  <?php } endwhile; endif; ?>


4.

highlight h1 in the 1st post on every page

 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();  
      $loopcounter++; ?> 
        <div class="post">
<?php if ($loopcounter  == 1) { ?>
         <h1 class="first"><?php the_title(); ?></h1>
<?php } else { ?>
         <h1 class="second"><?php the_title(); ?></h1>
<?php } ?>
        <?php the_content(); ?>
        </div>
<?php } endwhile; endif; ?>
......

CSS for this example

h1.first{font-size:1.4em;
          line-height:1.7em;
          color:red;
          background-color:inherit;}
h1.second{font-size:1.1em;
          line-height:1.5em;
          color:blue;
          background-color:inherit;}


5.

This is the method I’m using here at texto.de these days.

WordPress give me one post ;)


<?php $top_query = new WP_Query('showposts=1'); ?>
<?php while($top_query->have_posts()) : $top_query->the_post();
$do_not_duplicate = $post->ID; ?>
      <div class="first">
        <h3>the title</h3>
         <?php the_content("&raquo;&raquo; " . the_title('', '', false)); ?>
       </div>
<?php endwhile; ?>


5.a

…and now WordPress give my 7 other posts without the 1st one.

<ul class="second">
<?php $top_query = new WP_Query('showposts=7&offset=1'); ?>
<?php while($top_query->have_posts()) : $top_query->the_post();
$do_not_duplicate = $post->ID; ?>

<li id="post-<?php the_ID(); ?>" class="<?=($i%2)?"odd":"even";$i++;?>"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a>&nbsp; &raquo;&raquo;</li>
<?php endwhile; ?>
</ul>

My CSS for this example:



ul.second{margin:9px auto;
          width:97%;
          text-align:center;}

ul.second  li{padding:2px 0 2px 12px;	
          text-align:left;
          line-height:140%;
          background-image:url(images/texto-read-on.gif);	
          background-repeat: no-repeat;	
          background-position: 0 6px;}

li.odd{width:47%;
          float:right;}
li.even{width:47%;
          float:left;}

ul.second li.odd a,
ul.second li.even a{display:block;
          width:80%;
          float:left;
          overflow:hidden;
          white-space:nowrap;}


Safe your files and figure it out. Remember:Trial and error are good taskmaster. ;)

>Have fun, and don’t be afraid to contact me if you have questions.

And…
Please leave a reply or :
the sky will fall on your head. ;)

I wish you well
10

10 Beiträge zu “5 ways to highlight your first post in your WordPress theme

  1. Ping 5 Wege den ersten Beitrag im WordPress Theme hervorzuheben at Gedankeneimer

  2. Kommentar Autor
    Patrick
    Kommentar
    http://1.gravatar.com/avatar/be965afd8e05334af7ed2adc64736310?s=80&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    Danke fuer den Artikel.

    Hab nen kleinen Fehler gefunden, es sollte heissen:
    This is the method I’m using here at texto.de “these” days.

    Greetings

  3. Kommentar Autor
    Eugen
    Kommentar
    http://1.gravatar.com/avatar/5832693be7c3fba98753285d04cfeb5a?s=80&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    Vielen Dank, ich habe deinen Code benutzt und es lief alles einwandfrei. Vielen Dank für das Snippet.

  4. Kommentar Autor
    Sascha
    Kommentar
    http://1.gravatar.com/avatar/3f931545af6b67d66618d9eecb11fa12?s=80&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    Hallo Moni,

    ich bin am verzweifeln.
    Ich versuche seit Tage es hin zu bekommen das mein erster Beitrag einer anderen (div oder id)zugeordnet wird als die weiteren Beiträge!
    Ich bin neuling hab keine Ahnung von php und alle versuche sind schief gelaufen.

    Vielleicht magst du mir ja helfen und meldest dich bei mir !?

    Liebe Grüße

    Sascha

  5. Kommentar Autor
    webguru
    Kommentar
    http://1.gravatar.com/avatar/3e75e211f13d23bd9b2ff766aa95d5c2?s=80&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    I cant get it worked. I am trying to use the second code to highlight the first post. But it show excerpt only even the first post. Can you make it more clear for dummies, for example where to put titles, div classes,comments links etc. I mean as if it is in a real wordpress theme not just as a code. Please. I need this.

  6. Kommentar Autor
    Monika
    Kommentar
    http://1.gravatar.com/avatar/518f2a0fb595224fa459177d9e7c786b?s=80&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    Hi webguru

    <?php while (have_posts()) : the_post();$first++; ?>
    
    

    necessary is first ++ this is the counter.

    After this your stuff – all the things in your theme … all the divs or other html tags

    only instead of

    <?php the_content();?>
    
    <?php if ( 1 == $first && is_home() && !is_paged() ) { 
      the_content();
    } else {
    
     the_excerpt(); 
    } ?>
    

    it must work – if not -safe your index.php as index.txt and send it to me with this Email I know it is in German but I’m sure you understand . ;)

    regards

  7. Ping 5 Trends of Popular WordPress Blogs- Part1

  8. Kommentar Autor
    Frederik
    Kommentar
    http://0.gravatar.com/avatar/ceef158ded756fe85b40ef0bd005144b?s=80&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G

    Vielen Dank! Ich musste zwar ein paar If-Klauseln per Hand abändern, aber das lag nicht an deiner Beschreibung, sondern an fehlendem Syntax-Highlighting ;-) Ich hatte schon seit Monaten nach einer simplen Lösung gesucht, danke für diese tolle Lösung.