How to display fields from the loop in two separate divs

WordPress Development Asked by pual on November 3, 2020

I’m making this website where i’m displaying things in two colums: on the left, a list of titles, when you click them, it expands a text and on the right it show the corresponding images.
To do so, I use a css grid.
Here is my code that I use to generate my blog posts and display the corresponding images.
My issue there is that .four is supposed to be on the left, that is correct, and .five should be on the left, but it’s not since .five is generated under .four (left). How can I write this correctly so .five is not a child of .four and stays a child of my .wrapper but is keeping the id() order fine?

 <div class="wrapper-top">
    <div class="four">
// the query
    $all_posts = new WP_Query( array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => -1 ) );

    if ( $all_posts->have_posts() ) :

            <?php while ( $all_posts->have_posts() ) : $all_posts->the_post();  global $post;

                <li class='sub-menu'> <a href='#' class="exposition"  data-id="<?php the_id();?>"><?php the_title(); ?></a> <ul>
                    <li><?php the_content(); ?>
                    <?php the_id();?>

    <div class="five"> 
        <?php $images = get_field('gallery');
        if( $images ): ?>
            <div class="slide-photos" id="<?php the_id();?>" data-id="<?php the_id();?>"> 
                <?php foreach( $images as $image ): ?>
                    <div class="photos-ind"><img id="<?php the_id();?>" class="slide-photos" src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" data-id="<?php the_id();?>"/></div>
                    <?php endforeach; ?></div>
                <?php endif; ?>
        <?php endwhile; ?>
        <?php else : ?>
        <?php endif; ?>

Thanks a lot.

One Answer

A simple solution would be just run the loop twice.

    <?php // set loop $args here so they're in once place ?>

    <div class="four">
        <?php // run the loop once with $args, output left side items ?>
    <div class="five">
        <?php // run the loop again with $args, output right side items ?>

Correct answer by mozboz on November 3, 2020

Add your own answers!

Related Questions

video header in desktop view, image header in mobile view

2  Asked on December 12, 2021 by user3199063


Targeting single page with JS

1  Asked on December 12, 2021


Do i need to use a plugin for third party api integration?

1  Asked on December 12, 2021 by thinsanta


WordPress child pages not working

1  Asked on December 10, 2021 by prakashchhetri


how to enable ajax on submitting of contact form 7?

1  Asked on December 10, 2021 by muhammad-ishaq


Wpdb result with pagination

2  Asked on December 10, 2021 by dab-patoel


Modify existing plugin function with add_filter

1  Asked on December 10, 2021 by odd_duck


How to change the output of gallery shortcode

1  Asked on December 8, 2021 by alex-maiburg


How to enable xmlrpc in WordPress 5?

2  Asked on December 8, 2021 by alpha-romeo


Ask a Question

Get help from others!

© 2023 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP