960gs different classes on teasers posts

Question

I'm having hard time trying to use teasers post in my wordpress theme (based on 960gs), as you can see here http://img17.imageshack.us/img17/794/schermata20110420a15045.png what I got till now is one "featured" post and three teasers post with thumbnails that will probably be six (so it'll have seven posts displaied in the homepage). The problem is that to do so I have to assign a class "grid_2 alpha" to the teasers post and I don't know how to assign this class to just the first teaser on the left, lefting the other ones with no alpha or omega class and putting the omega class to just the last teaser post (the seventh).

If can help, here's the code I'm using for the loop:

<?php $firstClass = 'firstpost'; ?>
<?php /* Start loop */ ?>
<?php while (have_posts()) : the_post();  ?>

    <?php if (function_exists('yoast_breadcrumb')) { if (is_page() && $post->post_parent) { yoast_breadcrumb('<p id="breadcrumbs">','</p>'); } } ?>

<div class="post <?php echo $firstClass; ?>">
<?php $firstClass = 'grid_2 alpha'; ?>

<a href="<?php echo get_permalink(); ?>"><img src="<?php echo get_post_meta($post->ID, "Thumbnail", true);?>" width="140" height="100" style="padding-bottom:20px;" /></a>

    <h1><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h1>
    <?php the_content(); ?>
    <?php wp_link_pages(array('before' => '<nav id="page-nav"><p>' . __('Pages:', 'roots'), 'after' => '</p></nav>' )); ?>
</div>
<?php endwhile; // End the loop ?>

also I would like to know how I can add some text above the teaser section under the first featured post. Sorry for the too many questions and for my bad english, as you can understand I'm not a developer but I searched for one week and couldn't find anything helpful for my problems. Thanks in advance for any help, I really appreciate it.

Ok so there are the other loop pages and the front-page.php

front-page.php

<?php get_header(); ?>
        <div id="content" class="<?php echo roots_container_class; ?>"> 
            <div id="main" class="<?php echo get_option('roots_main_class'); ?> grid_6" role="main">
                <div class="container">
                    <?php get_template_part('loop', 'page'); ?>
                </div>
            </div><!-- /#main -->
            <aside id="sidebar" class="<?php echo get_option('roots_sidebar_class'); ?> grid_6" role="complementary">
                <div class="container">
                    <?php get_sidebar(); ?>
                </div>
            </aside><!-- /#sidebar -->
        </div><!-- /#content -->
<?php get_footer(); ?>

loop-search.php

<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if (!have_posts()) : ?>
    <div class="notice">
        <p class="bottom">Sorry, no results were found.</p>
    </div>
    <?php get_search_form(); ?> 

<?php endif; ?>

<?php /* Start loop */ ?>
<?php while (have_posts()) : the_post();  ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <time pubdate datetime="<?php the_time('c'); ?>">Posted on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>.</time>
                <?php if (get_option('roots_post_author') == 'checked') { ?>
                <p class="byline author vcard">
                    Written by <span class="fn"><?php the_author(); ?></span>
                </p>
                <?php } ?>
            </header>
            <div class="entry-content">
    <?php if (is_archive() || is_search()) : // Only display excerpts for archives and search ?>
            <?php the_excerpt(); ?>
    <?php else : ?>
            <?php the_content('Continue&hellip;'); ?>
    <?php endif; ?>
            </div>
            <footer>
                <?php $tag = get_the_tags(); if (!$tag) { } else { ?><p><?php the_tags(); ?></p><?php } ?>
            </footer>
        </article>

        <?php comments_template('', true); ?>

<?php endwhile; // End the loop ?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ($wp_query->max_num_pages > 1) : ?>
    <nav id="post-nav">
        <div class="post-previous"><?php next_posts_link( __( '&larr; Older posts', 'roots' ) ); ?></div>
        <div class="post-next"><?php previous_posts_link( __( 'Newer posts &rarr;', 'roots' ) ); ?></div>
    </nav>
<?php endif; ?>

loop-single.php

<?php /* Start loop */ ?>
<?php while (have_posts()) : the_post();  ?>

    <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <header>
            <h1 class="entry-title"><?php the_title(); ?></h1>
            <time class="updated" datetime="<?php the_time('c'); ?>" pubdate>Posted on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>.</time>
            <?php if (get_option('roots_post_author') == 'checked') { ?>
            <p class="byline author vcard">
                Written by <span class="fn"><?php the_author(); ?></span>
            </p>
            <?php } ?>
            <?php if (get_option('roots_post_tweet') == 'checked') { ?>
            <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
            <?php } ?>
        </header>
        <div class="entry-content">
            <?php the_content('<p>Read the rest of this entry &raquo;</p>'); ?>
        </div>
        <footer>
            <?php wp_link_pages(array('before' => '<nav id="page-nav"><p>' . __('Pages:', 'roots'), 'after' => '</p></nav>' )); ?>
            <p><?php the_tags(); ?></p>
        </footer>
        <?php comments_template(); ?>
    </article>

<?php endwhile; // End the loop ?>

loop.php

<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if (!have_posts()) : ?>
    <div class="notice">
        <p class="bottom">Sorry, no results were found.</p>
    </div>
    <?php get_search_form(); ?> 

<?php endif; ?>

<?php /* Start loop */ ?>
<?php while (have_posts()) : the_post();  ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <time pubdate datetime="<?php the_time('c'); ?>">Posted on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>.</time>
                <?php if (get_option('roots_post_author') == 'checked') { ?>
                <p class="byline author vcard">
                    Written by <span class="fn"><?php the_author(); ?></span>
                </p>
                <?php } ?>
            </header>
            <div class="entry-content">
    <?php if (is_archive() || is_search()) : // Only display excerpts for archives and search ?>
            <?php the_excerpt(); ?>
    <?php else : ?>
            <?php the_content('Continue&hellip;'); ?>
    <?php endif; ?>
            </div>
            <footer>
                <?php $tag = get_the_tags(); if (!$tag) { } else { ?><p><?php the_tags(); ?></p><?php } ?>
            </footer>
        </article>

        <?php comments_template('', true); ?>

<?php endwhile; // End the loop ?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ($wp_query->max_num_pages > 1) : ?>
    <nav id="post-nav">
        <div class="post-previous"><?php next_posts_link( __( '&larr; Older posts', 'roots' ) ); ?></div>
        <div class="post-next"><?php previous_posts_link( __( 'Newer posts &rarr;', 'roots' ) ); ?></div>
    </nav>
<?php endif; ?>

Really thanks for your help.

Ján Bočínec · Accepted Answer · 2011-04-21 10:33:28Z

1

Even better way is to check the current post position in query:

global $wp_query;

while (have_posts()) : the_post();
    $my_class = '';
    if ( $wp_query->current_post == 0 ) $my_class = ' first';
    if ( $wp_query->current_post == $wp_query->post_count - 1 ) $my_class = ' last';

    ?><div class="post<?php echo $my_class; ?>"><?php

    ...

    if ( $wp_query->current_post == $wp_query->post_count - 1 ) echo 'THE CONTENT UNDER THE FIRST POST';

endwhile; // End the loop

edited Apr 21, 2011 at 10:33

answered Apr 21, 2011 at 0:16

Ján Bočínec

2,32318 silver badges20 bronze badges

Thanks for the reply. I tried both ways and when I use a different loop then the one I posted, it always shows NOTHING. No posts at all, just the header, so I'm wondering if the problems might be that I have different loops file but I checked everything and doesn't seems to share variables or anything else. Still, anything I try is useless 'cause it won't show anything at all :(
– user4798
Commented Apr 21, 2011 at 10:10
My code should be working with no hassle. I suppose you should update your post with the actual loop you are using so I can tell you more...
– Ján Bočínec
Commented Apr 21, 2011 at 10:36
But actually that is all, what I posted is exactly the loop I use for givin different classes to the first post and the others. I'm not a developer, I've accomplished that by following a tutorial for the featured post on a theme framework (roots theme) and I don't know why it doesn't accept any different loop, it just doesn't =\ but I can post the others loop pages if that helps!
– user4798
Commented Apr 21, 2011 at 10:41
@Antonio please post the customized code where you implemented my solution.
– Ján Bočínec
Commented Apr 24, 2011 at 12:26

Add a comment |

Milo · Accepted Answer · 2011-04-20 17:43:00Z

0

add a counter variable before the loop, $counter = 1;, before the end of the loop, increment the counter, $counter++;. now within your loop you can check which post you're rendering, if it's the first, last, or somewhere between, and print the proper html accordingly.

<?php
$counter = 1;
while (have_posts()) : the_post();

    if($counter==1){
        // first post
    } elseif($counter==$wp_db->found_posts){
        // last post
    } else {
        // somewhere between first and last
    }

    $counter++;
endwhile; // End the loop
?>

answered Apr 20, 2011 at 17:43

Milo

78.8k4 gold badges127 silver badges168 bronze badges

Thanks for the reply. I tried both ways and when I use a different loop then the one I posted, it always shows NOTHING. No posts at all, just the header, so I'm wondering if the problems might be that I have different loops file but I checked everything and doesn't seems to share variables or anything else. Still, anything I try is useless 'cause it won't show anything at all :(
– user4798
Commented Apr 21, 2011 at 10:23
It's difficult to say where the error may be. presumably you're adding all of the necessary code to this to print the title and content where you want it? the above doesn't output anything as-is, it needs your html markup plus the_title() and the_content(), etc.. Try enabling debugging in WordPress to see if you're getting php errors.
– Milo
Commented Apr 21, 2011 at 13:48

Add a comment |

Stack Exchange Network

960gs different classes on teasers posts

2 Answers 2

Your Answer

Linked

Hot Network Questions

960gs different classes on teasers posts

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions