CODEWITHSUNDEEP
wordpressloopsposts
user1568811
user1568811

Reputation: 67

WordPress Category List Loop

I'm looking to build a list of posts from a specific category. I can retrieve them with the loop I've created but it's not displaying them the way I need them to. I want to run the loop and stack all the post titles in one div (if that makes sense).

I have two columns in my bootstrap layout. The first column displays a youtube video and the second column has the name of the video. Since its looping, the videos stack up and the titles stack up (like so)...

enter image description here

This isn't what I want. I want something like this

enter image description here

I also need to figure out a way to add a class to the first video and hide the rest. But that's a different issue. Any help would be much appreciated

<div class="videosSection">
    <div class="callout">
        <h1>Getting Started Videos</h1>
    </div>
    <?php

    $args = array(
        'post_type' => 'videos_post',
        'order' => 'ASC',
    );
    $videos_loop = new WP_Query($args);

    if ($videos_loop->have_posts()) : while ($videos_loop->have_posts()) : $videos_loop->the_post();
        $meta = get_post_meta($post->ID, 'videos_fields', true); ?>


        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 videosContainer <?php echo $meta['VideoLink']; ?>">
            <div class="videoPlayerContainer">
                <iframe width="100%" height="315"
                        src="https://www.youtube.com/embed/<?php echo $meta['VideoLink']; ?>"
                        frameborder="0" allow="autoplay; encrypted-media"
                        allowfullscreen></iframe>
            </div>
        </div>


        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <div class="videoLinks">
                <p class="<?php echo $meta['VideoLink']; ?>"><?php echo $meta['VideoTitle']; ?></p>
            </div>
        </div>


    <?php endwhile; endif;
    wp_reset_postdata(); ?>

</div>

Upvotes: 0

Views: 49

Answers (1)

Andrew Schultz
Andrew Schultz

Reputation: 4243

You need a conditional statement for outputting the title column divs because you only want to output this div column once. Using a loop counter and checking if it's the last and first video in the loop will achieve this. I haven't test this so let me know if there's any issues and I'll see if I can setup a test scenario to try it.

if ($videos_loop->have_posts()) : 
    for ( $x = 1; $x <= $videos_loop->post_count; $x++ ) :
    $videos_loop->the_post();
    $meta = get_post_meta($post->ID, 'videos_fields', true); 

?>


    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 videosContainer <?php echo $meta['VideoLink']; ?>">
        <div class="videoPlayerContainer">
            <iframe width="100%" height="315"
                    src="https://www.youtube.com/embed/<?php echo $meta['VideoLink']; ?>"
                    frameborder="0" allow="autoplay; encrypted-media"
                    allowfullscreen></iframe>
        </div>
    </div>

    <?php if( $x == 1 ) : ?>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <?php else: ?>
        <div class="videoLinks">
            <p class="<?php echo $meta['VideoLink']; ?>"><?php echo $meta['VideoTitle']; ?></p>
        </div>
    <?php endif; ?>
    <?php if( $x == $videos_loop->post_count) : ?>
    </div>
    <?php endif; ?>


<?php 
    endfor;

endif;

Upvotes: 0

Related Questions