Making first post wider than other posts on home page(default)

Question

I want to show first post wider than other posts on the index page of my wordpress theme like firstpost.com.

Please suggest me how to do this?

Answer 1

you create a variable that holds the count of the loop. then with every iteration you increment this variable.

in your loop you can check for the first post to do something else then the rest of the posts, assign a different css class for example.

// create var for count
$count = 0;

// do your loop & increment the var
if (have_posts()) : while (have_posts()) : the_post(); $count++;

if ($count === 1) :
// do code for only the first post...
endif;

// do code for the rest of your posts...

// end loop
endwhile; endif;

Answer 2

when you start loop take one variable $i=1; and increament this variable with 1 everytime loop is running

now you've to check if $i=5 or $i=10 (the number of post you want) then write css for wide post else normal like all posts

If you've little bit looping knowledge then this one is the easiest way.

Answer 3

one possible way: edit index.php of yoko; find this section:

<div id="wrap">
<div id="main">

and add this code inbetween:

<?php if( is_home() && !is_paged() ) : ?>
<div id="full-top"  class="content">
    <?php the_post(); ?>

    <?php get_template_part( 'content', get_post_format() ); ?>
</div>
<?php endif; //end of if( is_home() && !is_paged() ) // ?>

full code of edited index.php: http://pastebin.com/WFKzuQXa