Support » Themes and Templates » Give the first Post in every Page a different style…

  • Hey people,

    Yes my problem is already described in the title of this thread. I want to have 3 Posts on every Page. The newest Post of EVERY Page should have a different class so that I can style it different.

    I think I have to solve this with using multiple Loops. But I’m really not good enough in PHP and WordPress. So I nee your help. Right now my code is like this:

    <?php get_header();?>
    
    <?php if (have_posts()) : ?>
    
    <?php while (have_posts()) : the_post(); ?>
    <a href="<?php the_permalink() ?>"><?php the_title() ?>
    <?php endwhile; ?>
    
    <?php query_posts('posts_per_page=2&offset=1'); ?>
    <?php while (have_posts()) : the_post(); ?>
    <a href="<?php the_permalink() ?>"><?php the_title() ?>
    <?php endwhile;?>
    
    <div class="navigation">
    <div class="alignleft"><?php next_posts_link(__('&laquo; Older Entries', 'joeybottle')) ?></div>
    <div class="alignright"><?php previous_posts_link(__('Newer Entries &raquo;', 'joeybottle')) ?></div>
    </div>
    
    <?php endif; ?>
    
    <?php get_sidebar(); ?>
    
    <?php get_footer(); ?>

    Maybe somebody can help me solving my problem ??? Would be sooooo great of you. Thanks a lot,

    joey the bottle

Viewing 6 replies - 1 through 6 (of 6 total)
  • you could use a counter variable that is set to zero before the loop and incremented after the first post; if the counter=0, then echo a class=”first” where you need it, in the example for the link tag:

    <?php get_header();?>
    
    <?php if (have_posts()) :
    $count = 0; ?>
    
    <?php while (have_posts()) : the_post(); ?>
    <a href="<?php the_permalink() ?>" <?php if($counter==0) { echo 'class="first"'; $counter++; } ?>><?php the_title() ?>
    <?php endwhile; ?>
    
    <div class="navigation">
    <div class="alignleft"><?php next_posts_link(__('&laquo; Older Entries', 'joeybottle')) ?></div>
    <div class="alignright"><?php previous_posts_link(__('Newer Entries &raquo;', 'joeybottle')) ?></div>
    </div>
    
    <?php endif; ?>
    
    <?php get_sidebar(); ?>
    
    <?php get_footer(); ?>

    then style
    a.first {different style}

    Thread Starter joeybottle

    (@joeybottle)

    Hey there! Oh my gooooodness! That shit works really out! This is my actually code right now:

    <?php
    /*
    Template Name: Blog of joeybottle
    */
    $pagenum = $wp_query->query_vars;
    $pagenum = $pagenum['paged'];
    
    if (empty($pagenum)) {
    $pagenum = 1;
    }
    
    query_posts("paged=$pagenum");
    ?>
    
    <?php get_header();?>
    
    <?php if (have_posts()) :$count = 0; ?>
    
    <?php while (have_posts()) : the_post(); ?>
    
    <div class="<?php if($counter==0) { echo 'first'; $counter++; } ?> post">
    <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
    
    </div>
    
    <?php endwhile; ?>
    
    <div class="navigation">
    <div class="alignleft"><?php next_posts_link(__('&laquo; Older Entries', 'joeybottle')) ?></div>
    <div class="alignright"><?php previous_posts_link(__('Newer Entries &raquo;', 'joeybottle')) ?></div>
    </div>
    
    <?php endif; ?>
    
    <?php get_sidebar(); ?>
    
    <?php get_footer(); ?>

    It works! Thank you sooo much! I have one more question…what could I do, that I have this tmeplate only at the FIRST PAGE and if somebody klicks on “Older Entries” theres another template for this ????

    try this to have only the first post on the front page differently styled:

    <div class="<?php if(!is_paged() && ($counter==0)) { echo 'first'; $counter++; } ?> post">

    http://codex.wordpress.org/Conditional_Tags#A_Paged_Page

    Hey alchymyth,

    Thanks for this, do you mind if I use this code in my Open Source Theme Framework project?

    I’ve been using slightly different approach so far for a featured category with thumbnail swapping module.

    <?php $postclass = ($post == $posts[0]) ? 'first-post-ts' : ''; ?>
    <div class="feat-post-ts <?php echo $postclass ?>">

    Mine works just fine but I like yours better.

    thanks,
    although i am not even sure what you are talking about 😉

    none of this code is unique, just common sense and from ‘the codex’ – a mostly unread source of great information.

    imho, all code presented here is free to use by anyone

    Hmmm actually it worked fine only in case I have a single query with the that approach. In my case I have multiple columns(queries) and I tested it on one of them first and it worked, but now after putting it to the rest columns it’s not working.

    So it’s worth mentioning that this method isn’t suitable for assigning a class to the first post of multiple queries on a single page. – In case like that – go with the two line approach I pasted above.

    Yep I agree “the codex” is a great source for those who “speak” php, but for learners it’s like a Chinese 🙂

    I’m a designer and just making my first steps into php (I’m good at xhtml and CSS though) and believe me or not I often need help with tiny things like simple syntax…

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Give the first Post in every Page a different style…’ is closed to new replies.