How to show 3 most recent posts in a special tiles on home page using wordpress?

Question

I have these tile elements on the top of my homepage:

        <div id="tile-holder" class="group">

        <div class="tile1">
            <div class="tile-textbox" style="color: #22284f;">Just Some Title</div>
        </div>
        <div class="tile2">
            <img class="post-image" src="images/sample-large-2.jpg"/>
            <div class="tile-datebox">
                <img src="images/video-icon.png" >
                <p>2013/2/25</p>
                <div class="tile-info"><h1><a href="index2.html">Title 1</a></h1></div>
            </div>
        </div>
        <div class="tile3">
            <img class="post-image" src="images/sample-mid-2.jpg"/>
            <div class="tile-datebox">
                <img src="images/image-icon.png" >
                <p>2013/5/15</p>
                <div class="tile-info"><h1>Title 2</h1></div>
            </div>
        </div>
        <div class="tile4">
            <img class="post-image" src="images/sample-mid-3.jpg"/>
            <div class="tile-datebox">
                <img src="images/text-icon.png" >
                <p>2013/6/17</p>
                <div class="tile-info"><h1>Title 3</h1></div>
            </div>
        </div>
        <div class="tile5">
            <div class="tile-textbox" style="color: #ffffff;">Another Title</div>
        </div>

    </div> <!-- END Tile Holder -->

and I want to show 3 most recent posts in tile 2, 3 and 4; just the title, date and an image of that that gets the url from custom fields that I defined, I tried using :

.
.
.
<?php query_posts("post_per_page=3"); the_post(); ?>
            <div class="tile2">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
        </div>
        <div class="tile3">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
        </div>
        <div class="tile4">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
        </div>
<?php wp_reset_query(); ?> 
.
.
.

but it just gets one post and shows it there, what's wrong? what did I missed? please help, I'm new in the world of wordpress!

Answer 1

Here is one way to do it. If you're new you should read up on these essential topics: The Loop and WP_Query .

<?php 

$query = new WP_Query( 'posts_per_page=3' );

// The Loop
if ( $query->have_posts() ) {

    $i = 1;

    while ( $query->have_posts() ) {
        $query->the_post();

        $i++;
        ?>

        <div class="tile<?php echo $i ?>">
            <img class="post-image" src="<?php echo get_post_meta($post->ID, 'post_image', true) ?>"/>
            <div class="tile-datebox">
                <img src="<?php echo get_post_meta($post->ID, 'post_icon', true) ?>" >
                <p><?php the_time('F jS, Y') ?></p>
                <div class="tile-info"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1></div>
            </div>
        </div>
<?php


    }
} else {
    // no posts found
}

/* Restore original Post Data */
wp_reset_postdata();

Answer 2

<?php $args = array(
    'numberposts' => 3,
    'offset' => 0,
    'category' => 0,
    'orderby' => 'post_date',
    'order' => 'DESC',
    'include' => ,
    'exclude' => ,
    'meta_key' => ,
    'meta_value' =>,
    'post_type' => 'post',
    'post_status' => 'draft, publish, future, pending, private',
    'suppress_filters' => true );

    $recent_posts = wp_get_recent_posts( $args, ARRAY_A );


   //write loop here
?>