loop - Display posts side by side with custom query

I'm trying to organize my posts side by side but they keep being displayed vertically.

This is my code:

<div class="row agenda-box justify-content-start padding minheight-40">
    <div class="col-md-6 padding-top padding-bottom">
        <h5 class="main-text section-title">próximos eventos</h5>
        <?php
        $agendaHome = new WP_Query(array(
            'post_type' => 'artist',
            'orderby' => 'title',
            'order' => ASC,
        ));

        while ($agendaHome->have_posts()) {
            $agendaHome->the_post(); ?>
            <ul>
                <li>
                    <button class="agenda-btn" data-toggle="collapse" data-target="#<?php the_title(); ?>"><?php the_title(); ?></button>
                    <div id="<?php the_title(); ?>" class="collapse">
                        <?php the_field('agenda'); ?>
                    </div>
                </li>
            </ul>           
        <?php }
        ?>


    </div>
</div>

Any suggestions?

I'm trying to organize my posts side by side but they keep being displayed vertically.

This is my code:

<div class="row agenda-box justify-content-start padding minheight-40">
    <div class="col-md-6 padding-top padding-bottom">
        <h5 class="main-text section-title">próximos eventos</h5>
        <?php
        $agendaHome = new WP_Query(array(
            'post_type' => 'artist',
            'orderby' => 'title',
            'order' => ASC,
        ));

        while ($agendaHome->have_posts()) {
            $agendaHome->the_post(); ?>
            <ul>
                <li>
                    <button class="agenda-btn" data-toggle="collapse" data-target="#<?php the_title(); ?>"><?php the_title(); ?></button>
                    <div id="<?php the_title(); ?>" class="collapse">
                        <?php the_field('agenda'); ?>
                    </div>
                </li>
            </ul>           
        <?php }
        ?>


    </div>
</div>

Any suggestions?

• wp-query
• loop
• css
• html

Share Improve this question asked Feb 5, 2019 at 17:25 lulufvlulufv 511 silver badge33 bronze badges 2

• most likely a css issue and not a WP issue. does it work with just dummy content inside of the col-md-6 – NickFMC Commented Feb 5, 2019 at 17:30
• yes! it works perfectly without the php – lulufv Commented Feb 5, 2019 at 17:35

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Not sure how your final html should look, but I guess it's:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

In that case, you should move the ul element outside the while loop and your code should look like this:

<ul>
<?php while ($agendaHome->have_posts()) {
            $agendaHome->the_post(); ?>
    <li>rest of the code goes here</li>
<?php } ?>
</ul>

Also add apostrophes around ASC at the order parameter.

'order' => 'ASC'