How to display multiple custom post types in separate divs on a page template

  • I’m not sure if my topic title is even clear, so I will do my best to explain what I’m trying to do.

    I created a custom post type called, “Books.” On my home page (using a custom template), I’d like 3 Book posts to be displayed beside each other. Using HTML/CSS I would just create 3 separate divs and float them all to the left. However, when inserting my code to call the 3 Book posts, I don’t know how to do this.

    What should be PHP code look like on this page? Right now, it looks like this:

    <div class="booksSection">
                <?php $args = array( 'post_type' => 'book', 'posts_per_page' => 3 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
        the_title();
        echo '<div class="entry-content">';
        the_content();
        echo '</div>';
endwhile; ?>
                </div>

Viewing 9 replies - 1 through 9 (of 9 total)

  • This should get you the last 3 posts from the Books category.

    <div class=”booksSection”>
    <?php query_posts( ‘category_name=Books&showposts=3’ );
    </div>

    Just add this to template where you want it to show up.

    Thread Starter meredith1986

    (@meredith1986)

    Thanks Stacey, but that did not do the trick. The posts are not in categories, they are just custom post types.

    I’m essentially trying to do something like this:

    <div class="fourcol first pad-30">
    <div class="involved-icon" style="background-image:url(images/adopt.png);"></div>
    <h3 class="serif light bigtext">Adopt an Orphanage</h3>
    <p>Support an orphanage and make an impact on an entire community.<br><br></p>
    <a class="uc" href="/get-involved/adopt-an-orphanage">Learn More</a>
</div>

<div class="fourcol pad-30">
    <div class="involved-icon" style="background-image:url(images/campaign.png);"></div>
    <h3 class="serif light bigtext">Run Your Own Campaign</h3>
    <p>Invite your friends and neighbors to join the fight for orphans around the world.</p>
    <a class="uc" href="/get-involved/run-a-campaign">Learn More</a>
</div>

<div class="fourcol last pad-30">
    <div class="involved-icon" style="background-image:url(images/visit.png);"></div>
    <h3 class="serif light bigtext">Visit an Orphanage</h3>
    <p>Go beyond and experience their stories first hand.<br><br></p>
    <a class="uc" href="/get-involved/visit-an-orphanage">Learn More</a>
</div>

    That code above comes from the home page of soworldwide(dot)org. On the site, you will see that the 3 different divs are entitled, “Adopt an Orphanage,” “Run Your Own Campaign,” and “Visit an Orphanage.” In this example, their custom post type would be Get Involved. Mine is called Books, but it’s the same concept.

    What’s the best way to set this up? I’m just starting to dive into custom themes, so I’m still learning basic concepts.

    Thread Starter meredith1986

    (@meredith1986)

    Or is there a better way altogether to achieve this?

    what result do you get when you run the code you showed above ?

    do you have a link to your site to illustrate the output of your php code?

    I assume it does output the three posts of the ‘book’ post type;

    what you are missing is some html tags within the loop;

    example:

    <div class="booksSection">
                <?php $args = array( 'category_name' => 'gallery', 'posts_per_page' => 3 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="fourcol ' . (($loop->current_post%3 == 0)?'first ':'') . (($loop->current_post%3 == 2)?'last ':'') . 'pad-30">';
        echo '<h3 class="serif light bigtext">'; the_title(); echo '</h3>';
        echo '<div class="entry-content">';
        the_content();
        echo '</div>';
echo '</div>';
endwhile; ?>
                </div>

    that should be enough to give you an idea how to add html tags.

    Thread Starter meredith1986

    (@meredith1986)

    Sorry, I’m having a difficult time explaining what I’m trying to achieve.

    I want my client to be able to go in and add new books from the Dashboard and I would like each one of those 3 divs to be separate books. I have created a custom post type called Books, but I don’t know what code to use on my custom page in order to display 3 of the latest Book posts, each in a separate div. The way I have it set up now (see my code from the first post), the Books posts are just being listed one after the other.

    Does that make sense?

    Thread Starter meredith1986

    (@meredith1986)

    Ok, I think I just figured it out. All I had to do was move the title inside the entry-content div. Does this code look right?

    <div class="booksSection">
<?php $args = array( 'post_type' => 'book', 'posts_per_page' => 3 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
        echo '<div class="entry-content">';
        the_title();
        the_content();
        echo '</div>';
endwhile; ?>
 </div>

    referring to your other topic https://www.ads-software.com/support/topic/add-class-based-on-evenodd?replies=6#post-3513365 –
    to match the css classes ‘.first’ and ‘.last’ of this earlier posted code, and add them to you last posted code section, change the one line to:

    echo '<div class="entry-content' . (($loop->current_post%3 == 0)?' first':'') . (($loop->current_post%3 == 2)?' last':'') . '">';
    Thread Starter meredith1986

    (@meredith1986)

    Why would I use .first and .last instead of .odd and .even? Because I only have 3 posts total?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to display multiple custom post types in separate divs on a page template’ is closed to new replies.