Support » Themes and Templates » WordPress Loop and 3 items per row

  • Resolved MaddTechWF

    (@maddtechwf)


    I want to take my blog posts and show 3 items per row and then as many rows as needed. How can I do this with the WordPress Loop?

Viewing 5 replies - 1 through 5 (of 5 total)
  • you could try to add some code to provide css classes which you can then style in style.css of your theme;

    example: http://www.transformationpowertools.com/wordpress/posts-in-columns-a-new-twist-on-an-old-problem

    I have the HTML and CSS already made up. I just have to put a div wrapper around every 3 entries that are returned. I was just not sure how to modify the WordPress Loop to do this.

    I was just not sure how to modify the WordPress Loop to do this.

    have you succeeded to locate the code of the loop, and to modify it?

    if not, please post the name of your theme, and possibly a link to your site.

    @alchymyth – I thought I had it working but evidently not. The loop I have written only shows the most current post. It will not loop through and show them all.

    <!-- Reset WordPress Query -->
                                <?php wp_reset_query(); ?>
                                <!-- Set Category Name to Portfolio-Item -->
                                <?php query_posts( 'category_name=portfolio' ); ?>
                                <div id="portfolio">
                                	<div class="portfolio_box_container clearfix">
                                    <!-- Declare Count for rows -->
                                    <?php $count=0; ?>
                                    <!-- Start WordPress Loop -->
                                    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                                    	<?php if ($count==0) : ?>
                                        	<div class="portfolio-items">
                                				<div class="cleardiv"></div>
                                    	<?php endif; ?>
                                            <div class="portfolio_box">
                                                <div class="image_skin">
                                                    <div class="image_inside_border">
                                                        <div class="image_holder">
                                                            <a href="<?php echo get_permalink(); ?>" alt="<?php the_title(); ?>">
                                                                <img src="<?php echo get_post_meta(get_the_ID(), 'post-thumbnail', true); ?>" alt="<?php the_title(); ?>" />
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="cleardiv"></div>
                                            </div>
                                            <?php $count++; ?>
                                    	<?php if ($count==3 ||$wp_query->found_posts==0) : ?>
                                        	<?php $count=0; ?>
                                            </div>
                                        <?php endif; ?>
                                    <?php endwhile; ?>
                                    <?php else : ?>
                                        <h3>Sorry but there are no portfolio items.</h3>
                                    <?php endif; ?>
                                    <?php wp_reset_query(); ?>
                                	</div>
                                </div>
                            </div>

    I know the code might seem confusing but what I was trying to do is the following. I have a dive wrapped around each row. Which you will find inside the first IF statement inside the loop. Then it will parse the post info out and then check if the count is equal to three to see if it needs to close the div and reset the count to 0 so it will start the next row with the div from the first statement. I also have the second if checking to see if it is at the last post so it will close the row and not leave it open.

    I got it worked out finally. I had to change a few lines of code: <?php query_posts( array ( 'category_name' => 'Portfolio', 'posts_per_page' => -1 ) ); ?>

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘WordPress Loop and 3 items per row’ is closed to new replies.