Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Jaco Burger
Jaco Burger
20,807 Points
Posted by Jaco Burger
Jaco Burger
20,807 Points

Wordpress Loop - Owl Slider - Custom Fields

Hi Guys.

I've got a tricky loop to figure out here. Basically what should happen is, that when the client create a category (Year in which the huskies were born), it should automatically put the category name into the Slide header (that part is easy enough), but it should also put all the huskies, which were born in the same year, into the same group, which forms one item of images per year inside the slider.

Attached you will find my code.

Thanks! 

 <!-- HUSKY SLIDER -->
    <div id="husky_slide" class="row huskies__bg">
                <div class="item">
                <div class="col-sm-12 date"> <h2> 2015 </h2> </div>

                </div>

    <?php
        $args = array( 
          'post_type' => 'puppies',
          'category_name'   => 'year-2015'
        );
        $the_query = new WP_Query( $args );

      ?>


            <?php $post_counter = 0; // start a counter before the loop ?>
                <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> 
                <?php $post_counter++; // increment the counter for each post ?>

                    <article <?php post_class(); ?> id="layout-<?php echo $post_counter; ?>">

                    <?php if ( $post_counter <= 6 ) : ?>
                    <div class="col-sm-4 col-xs-6">
                    <a href="" data-toggle="modal" data-target="#<?php the_ID();  ?>" >
                          <?php the_post_thumbnail('large');  ?>
                    </a>  

                      <!--  Hidden popup modals -->

                      <div class="modal fade" tabindex="-1" aria-hidden="true" id="<?php the_ID();  ?>">
                          <div class="modal-dialog">
                            <div class="modal-content">    
                              <div class="modal-body">

                                        <div class="heading <?php the_field("sex") ?>"> <h4> <?php the_title();  ?> </h4> 
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        </div>


                                        <img class="img-responsive"> <?php the_post_thumbnail('large');  ?>

                                        <div class="col-sm-4">
                                        <?php the_field("sex"); ?>
                                        </div>


                                        <div class="col-sm-8">
                                        <?php the_field("puppy_info"); ?>
                                        </div>
                                        <p> <?php the_field("date_of_birth"); ?></p>                     
                            </div>
                          </div>
                        </div>
                    </div>


                    <?php elseif ($post_counter <=8) :?> 
                    <div class="col-sm-4 col-xs-6">
                    <a href="" data-toggle="modal" data-target="modalpup" >
                            <?php the_post_thumbnail('large');  ?> 
                    </a>  

                     <!--  Hidden popup modals -->

                      <div class="modal fade" tabindex="-1" aria-hidden="true" id="<?php the_ID();  ?>">
                          <div class="modal-dialog">
                            <div class="modal-content">    
                              <div class="modal-body">

                                        <div class="heading <?php the_field("sex") ?>"> <h4> <?php the_title();  ?> </h4> 
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        </div>


                                        <img class="img-responsive"> <?php the_post_thumbnail('large');  ?>

                                        <div class="col-sm-4">
                                        <?php the_field("sex"); ?>
                                        </div>


                                        <div class="col-sm-8">
                                        <?php the_field("puppy_info"); ?>
                                        </div>
                                        <p> <?php the_field("date_of_birth"); ?></p>                     
                            </div>
                          </div>
                        </div>
                    </div>

                    <?php endif; ?>

                    </article>

                <?php endwhile; endif?>  

    </div>

</section>

1 Answer

Jacobus Hindson
Jacobus Hindson
14,429 Points
Jacobus Hindson
Jacobus Hindson
14,429 Points

Hi Jaco,

<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

Should be: <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

I haven't read through the entire code block but the was the initial error I saw.