Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

Displaying latest three posts of posts page on my static front page.

I have a front-page.php and a home.php. I have my theme set up so that a static front page, and then my blog posts being shown on it's own separate page. I want to display the latest three posts from my blog on my static-front page. I know that this requires using a few extra while loops and queries, I'm just not exactly sure what, and I'm not sure if the extra code goes on the front-page.php or the home-page.php.

For the time being I have exactly the smae code in both templates, it read's as follows: 

</div>
<div class="pageMain">
<?php while ( have_posts() ) : the_post(); ?>
    <article class="col-group">
                          <div class ="excerpt">   
                            <h2><?php the_title(); ?></h2>
                            <p class="those"><?php the_excerpt(); ?></p>
                            <a href="<?php the_permalink(); ?>">  <div class ="text"></div></a>
                          </div>                
           </article>
<?php endwhile; ?>
<span class="clear"></span>
</div>

    <?php get_footer(); ?>

The blog page is working fine, it's all about getting the three latest posts on the front page.

2 Answers

Andres Altuve
Andres Altuve
16,274 Points
Andres Altuve
Andres Altuve
16,274 Points

To be able to do this, there are 3 steps you have to do:

First Step : Crete a custom query.

          <?php
               $yourQuery = new WP_Query(array(

                       'post-per-page' : '3'                   

                    ));

          ?>

Second Step: Create Loop

       <?php

                  <?php while ( $yourQuery-> have_posts() ) : $yourQuery->the_post(); ?>

                    //Your code....

                    <?php endwhile; ?>
            <?php endif; ?>
          ?>

and last step is to reset the query.

       <?php

          wp_reset_postdata(); 
          ?>

For more information how to add arguments to your query check out Wordpress Loop Documentation Hope this helps!

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Andres,

Thanks for you help here.

I'm having some syntax errors, would you be able to post everything together in one block?

At the moment, I have the exact same code in my front page and blog pages, which I thought would at least display all of the posts on the blog page on the front page. Instead nothing is shown on the front page, except it's page title which is home.

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

where exactlly does custom query go?

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

I've just added my current situation in a new question

https://teamtreehouse.com/community/displaying-posts-on-front-page-from-blog

Thanks for any further help

Andres Altuve
Andres Altuve
16,274 Points
Andres Altuve
Andres Altuve
16,274 Points

Hey gabriel my first answer was ALL wrong, try this one..

</div>
<div class="pageMain">

     <?php
               $yourQuery = new WP_Query(array(
                       'post-per-page' : '3'                   
                    ));
               if ( $query->have_posts() ) :
      ?>

    <?php 
    while ( $yourQuery-> have_posts() ) : $yourQuery->the_post(); 
     ?>
    <article class="col-group">
                          <div class ="excerpt">   
                                   <h2><?php the_title(); ?></h2>
                                    <p class="those"><?php the_excerpt(); ?></p>
                                    <a href="<?php the_permalink(); ?>">  <div class ="text"></div></a>
                          </div>                
     </article>
     <?php endwhile; endif; ?>
     <?php   wp_reset_postdata();    ?>
<span class="clear"></span>
</div>

<?php get_footer(); ?>
prakash Jha
prakash Jha
Courses Plus Student 756 Points

hi Andres,

I created the code of displaying posts, when i write this , in index.php then it is working fine, please tell me the how can i write this code in my static page in html area i try to write the plugin and create a shortcode and use this shortcode in my static pages,but it is not working