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

PHP

Lauren Clark
Lauren Clark
33,155 Points
Posted by Lauren Clark
Lauren Clark
33,155 Points

How do I display 3 different custom post types on homepage

I've created a custom post type of "Products" to fill 3 intro boxes on a home page. The custom fields are

  • An Image
  • Title
  • Description
  • and an URL to pick which page the intro should go to.

I want the boxes to be of 3 different posts, not random, but I need some way to signify the order... So lets say 3 latest posts.

pic of bothersomeboxes

They currently look like this because I've got them all in the same div somehow. Do I need to do some kind of foreach loop to separate them out? My code is 

<?php
/*
Template Name: Homepage w/ Boxes
*/

get_header(); ?>

<!-- Query Post Type -->
<?php

$args = array(
    'post_type' => 'products',
    );

$the_query = new WP_Query( $args );

?>


<!-- Banner Starts -->

<div class="row banner">
    <!-- Featured Img goes here -->
    <div class="inner-text"><?php bloginfo('description');?></div>
    <?php if ( has_post_thumbnail() ) {
        the_post_thumbnail();
    } 
    the_content(); ?>
</div> <!-- End of Banner -->
</div> <!-- Blue Gradient Ends Here -->

<!-- Start the Main!  -->

<div class="contain-to-grid bg-wh-grad">
    <div class="row light-container">
        <div class="large-4 columns box-container">
            <?php /* Start loop */ ?>
            <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

                <img src="<?php the_field( 'products_image' ); ?>" alt="<?php the_field( 'product_title'); ?>">
                <a href="<?php the_field('url_to_page') ?>"><h3><?php the_field( 'product_title' ); ?></h3></a> 
                <?php the_field( 'product_description' ); ?>


            <?php endwhile; endif;  ?>
            <?php /* End Loop */ ?>
        </div>



        <hr>

    </div> <!-- End light-container -->

    <?php get_footer(); ?>

2 Answers

Gareth Borcherds
Gareth Borcherds
9,372 Points
Gareth Borcherds
Gareth Borcherds
9,372 Points

Just pass the query variables that will order your posts by date. You can read the documentation here:

http://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters

And then for the limiting of the number of posts, you'll want to add the posts_per_page query variable and set it to 3. The documentation for that is on the same page, but here is the direct link.

http://codex.wordpress.org/Class_Reference/WP_Query#Pagination_Parameters

Anyway, so your $args variable will now become something like

$args = array(
    'post_type' => 'products',
    'orderby' => 'date',
    'order' => 'DESC',
   'posts_per_page' => 3
    );
Lauren Clark
Lauren Clark
33,155 Points
Lauren Clark
Lauren Clark
33,155 Points

OMG. I've been doing so many different things but the real problem was I didn't close the funking div in the right place. Sometimes it helps to give up I think! Thank you so much for that :)