5 ways to highlight your first post in your WordPress theme

[]

I would like to have the first post full, the other only with the excerpt. Only one CSS class for my first post and one for the other. News only on the first page. … My 5 ways to highlight my first post in my wordpress themes.

der Loop in WordPress
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

Ich bin Buch-Autorin, WordPress-Fachfrau, Beraterin für SEO und online Marketing; Lösungen lieb ich genauso wie html5 und css3.
Außerdem bin ich WordPress Enthusiastin, bevorzuge Espresso und gute Schokolade,
Mit WordPress ist fast alles möglich, aber nicht immer sinnvoll. Dies pro Projekt herauszuarbeiten, das ist meine Passion.


10 Gedanken zu “5 ways to highlight your first post in your WordPress theme”

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

  2. 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. Vielen Dank, ich habe deinen Code benutzt und es lief alles einwandfrei. Vielen Dank für das Snippet.

  4. 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. 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. 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. Pingback: 5 Trends of Popular WordPress Blogs- Part1

  8. 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.