WordPress.org

Ready to get started?Download WordPress

Forums

Adding post loop over columns (1 post)

  1. edwardgyngell
    Member
    Posted 1 year ago #

    Hello

    I am wanting to display post loops over 3 columns. I have found a source that looks like it will do the trick but I'm not too sure how to integrate the php with my custom post type. I need it to display in 3 different div columns because the site will be responsive.

    This is my index code:

    <?php get_header(); ?>
    <div id="content-wrap" style="margin-top:100px;">
    	<div class="container">
        	<div class="row">
    				<?php
    
                    global $query_string;
                    query_posts($query_string . "post_type=projects&post_status=publish&posts_per_page=50");
                    if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
                    <div class="fourcol">
                        <div class="project">
                            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php the_post_thumbnail(); ?>
                                <div class="project-name">
                                    <h2><?php the_title(); ?></h2>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="fourcol">
                        <div class="project">
                            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php the_post_thumbnail(); ?>
                                <div class="project-name">
                                    <h2><?php the_title(); ?></h2>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="fourcol">
                        <div class="project">
                            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php the_post_thumbnail(); ?>
                                <div class="project-name">
                                    <h2><?php the_title(); ?></h2>
                                </div>
                            </a>
                        </div>
                    </div>
                    <?php endwhile;
                    endif; ?>
    
            </div>
    	</div><!-- End of container -->
    </div> <!-- End of profile -->
    <?php get_footer(); ?>

    This is the block of code on the internet I found I think might do the trick:

    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
    
    <div id="left-column">
    <h1><?php the_permalink(); ?></h1>
    <?php the_content(); ?>
    </div>
    
    <?php endif; endwhile; else: ?>
    <div>Alternate content</div>
    <?php endif; ?>
    
    <?php $i = 0; rewind_posts(); ?>
    
    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
    
    <div id="right-column">
    <h1><?php the_permalink(); ?></h1>
    <?php the_content(); ?>
    </div>
    
    <?php endif; endwhile; else: ?>
    <div>Alternate content</div>
    <?php endif; ?>

    How can I integrate the two for my custom post type.

    Thanks heaps in advance.

Topic Closed

This topic has been closed to new replies.

About this Topic