2

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(); ?>
  • This sould like the slider is not initialized properly, you should check if the initialization code is being executed. – Mark Kaplun Feb 7 '16 at 1:18
  • @MarkKaplun the initialization code is being executed properly, all the foundation js components work fine. i am sure something is wrong within the php code i have provided. – steamfunk Feb 8 '16 at 5:38
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>
  • I am trying to also integrate the bullet points in which come with orbit, but they require a data-slide="slide number goes here" in order for the bullets to control the slides. I was thinking i could retrieve the get_post_thumbnail_id() but it does not seem to work. would anyone know how to go about this? – steamfunk Aug 18 '16 at 15:12
  • About 7 mins in, shows you how to integrate the bullets: youtube.com/watch?v=BBVGd2yjpo4 – Mr Jonny Wood May 17 '17 at 11:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.