WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] WordPress Loop and 3 items per row (6 posts)

  1. MaddTechWF
    Member
    Posted 2 years ago #

    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?

  2. alchymyth
    Forum Moderator
    Posted 2 years ago #

    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

  3. MaddTechWF
    Member
    Posted 2 years ago #

    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.

  4. alchymyth
    Forum Moderator
    Posted 2 years ago #

    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.

  5. MaddTechWF
    Member
    Posted 2 years ago #

    @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.

  6. MaddTechWF
    Member
    Posted 2 years ago #

    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 ) ); ?>

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.