Question

I am trying to display my custom post type in the theme I am developing with the boostrap responsive framework. Everything is working great aside from the fact that I can’t get my custom post type to display correctly. I am looping through the post type and can’t end my <div>‘s resulting in the footer getting pushed to the left. Take a look:

<?php 
$query = new WP_Query(array('post_type'=>'services','posts_per_page'=>'5'));
while ($query->have_posts()) : $query->the_post();?>

<!-- Post Start -->
<div class="row">
<div class="span2">
<?php the_post_thumbnail(array(150,150), array('class'=>'service-image')); ?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?></h2></a>
<p><?php the_content(); ?></p>
<p><a class="btn" href="<?php the_permalink(); ?>">View details &raquo;</a></p>
</div>

<?php endwhile; wp_reset_query(); ?></div></div></div></div></div>
<!-- Post End -->

I have to stack my </div> at the end of the query in order for the custom post to display correctly and the footer returns to its proper spot. I am hoping that someone can see my error, because I am lost. Any help or guidance would be great. The theme can be seen in development at crothersenvironmental.com. On the live site I have removed all the ending div’s for troubleshooting purposes.

Thanks in advance.

Answer 1

• As gArn said, your row div should be before the loop
• you should not use <p> tag with the_content()
• your </a> closing tag should be before </h2>

You can try :

<div class="row">
    <?php 
    $query = new WP_Query(array('post_type'=>'services','posts_per_page'=>'5'));
    while ($query->have_posts()) : $query->the_post(); ?>

    <!-- Post Start -->
    <div class="span2">
        <?php the_post_thumbnail(array(150,150), array('class'=>'service-image')); ?>
        <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
        <?php the_title(); ?></a></h2>
        <div><?php the_content(); ?></div>
        <p><a class="btn" href="<?php the_permalink(); ?>">View details &raquo;</a></p>
    </div>
    <!-- Post End -->

    <?php endwhile; wp_reset_query(); ?>
</div>