Integrating Orbit slider into wordpress through custom post type

I am currently working with FoundationPress, It is a great starter theme loaded with cool features. I would like to create a custom post type called “slides” which will be displayed on the homepage through foundation’s orbit slider. I have found a solution on github that seemed to be working with previous versions of foundation, but It is not working with foundation 6, since they made some changes to their syntax for the orbit slider. The post type works fine, and the loop displays the images but they are stacked on top of one another and not working like a carousel.

This is the code for my custom loop to display the images from the post type, I would appreciate it if someone could take a look and tell me what i am doing wrong.

 <?php   
            $args = array( 
          'post_type' => 'slides',
          'posts_per_page'  => 999
        );
        $temp = $wp_query;
        $wp_query = null;
        $wp_query = new WP_Query($args);
        if($wp_query->have_posts()) : ?>






        <ul  class="orbit-container">
         <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
          <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
            <?php   


                while($wp_query->have_posts()) : $wp_query->the_post();
                $postid = get_the_ID(); 
                if(has_excerpt()) {
                    $datacaption = 'data-caption="#slide-'.$postid.'"';
                } else { 
                    $datacaption = '';
                }
                if(has_post_thumbnail()) {          
                    $imgid = get_post_thumbnail_id($postid);
                    $alt = get_post_meta($imgid , '_wp_attachment_image_alt', true);
                    $imgurl = wp_get_attachment_url($imgid);
                    echo '<li class="orbit-slide">';
                    echo '<div>';
                    echo '<img  src="'.$imgurl.'" '.$datacaption.' alt="'.$alt.'" />';
                } else {
                    echo '<div class="orbit-slide" '.$datacaption.'>';
                    echo get_the_content();
                    echo '</div>';
                    echo '<div>';
                    echo '</li>';
               }
             if(has_excerpt()) {
                        $output="<span class="orbit-caption" id="slide-".get_the_ID().'">';
                    $output .=    '<h3 class="slide-title">'.get_the_title().'</h3>';
                    $output .=    '<p class="slide-excerpt">'.get_the_excerpt().'</p>';
                    $output .= '</span>';
                    echo $output;
                };  
            endwhile; ?>

            </ul>






    <?php endif; ?>

<?php $wp_query = null; $wp_query = $temp; wp_reset_query(); ?>

1 Answer
1

I have figured it out I started from scratch and created a custom loop with all the updated classes for the foundation orbit slider. If anyone would like the code please find it below:

 <?php $loop = new WP_Query( 
    array( 
    'post_type' => 'slides', 
    'posts_per_page' => 999 ) 
    ); ?>




    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="true">


            <ul class="orbit-container" >
              <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
              <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>

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

              <li class="orbit-slide" >
                <div>

                 <?php the_post_thumbnail(); ?>



                 <?php if(!empty($post->post_excerpt)) {
       echo '<div class="orbit-caption" >';
    the_excerpt();
        echo '</div>';

     } else {

     } ?>





                </div>

              </li>
              <?php endwhile; wp_reset_query(); ?>

            </ul>

          </div>

Leave a Comment