Using Shortcode to Query Custom Post Type and Return Carousel

I am using wordpress and would like to offer the user the capability to use a shortcode to pull a slider into the post / page.

i.e [slider id="2"]

I have done the following:

  • Created custom post type ‘Sliders’
  • Used Advanced Custom Fields to create all the fields required within the post type.
  • Created the shortcode using:

    function landwSliderShortcode($atts = [], $content = null, $tag = '')
    {
    $atts = array_change_key_case((array)$atts, CASE_LOWER);
    $slider_atts = shortcode_atts([
                            'id' => '1',
                             ], $atts, $tag);
    return $slider_atts['id'];
    }
    
    function landwSliderShortcodes_init()
    {
    add_shortcode('slider', 'landwSliderShortcode');
    }
    add_action('init', 'landwSliderShortcodes_init');
    

I now need to call another function that is going to perform the WP_Query of the custom post type and build the HTML slider… It is this part I am struggling with. I have got this far:

function getSliderData($sliderId) {
  $slidercount = 0;
  $args = array(
    'post_type' => 'slider',
    'post_status' => 'publish',
    'posts_per_page' => '1',
    'p' => $sliderId,
   );
  $sliderLoop = new WP_Query( $args );
  if ( $sliderLoop->have_posts() ) :
    while ( $sliderLoop->have_posts() ) : $sliderLoop->the_post();

    $image = get_sub_field('image');
    $image_render = $image['sizes'][$image_asset_size];
    $add_link = get_sub_field('add_link');
    $link_type = get_sub_field('link_type');
    $internal_link = get_sub_field('internal_link');
    $external_link = get_sub_field('external_link');
    $add_lightbox = get_sub_field('add_lightbox');
    $lightboxasset = get_sub_field('lightbox_asset');
    $lightboxassetcaption = get_sub_field('lightbox_caption');
    $caption = get_sub_field('caption');
    $sub_caption = get_sub_field('sub_caption');

    ?>

        <div class="slider-wrap">
            <?php if ($add_link) {
                    if ($link_type == "External") {
                        echo '<a class="carousel-slide-link" href="'.$external_link.'" target="_blank"></a>';
                    } else {
                        echo '<a class="carousel-slide-link" href="'.$internal_link.'"></a>';
                    }
                }
            ?>
            <?php if ($add_lightbox) { ?>
                   <a class="carousel-slide-link" data-fancybox data-src="#SliderModal<?php echo $slidercount ?>" target="_blank" href="javascript:;"></a>
            <?php } ?>

          <img src="<?php echo $image_render; ?>">

          <!-- 6 Mar 17 added conditional to show the caption -->
          <?php if (strlen($sub_caption) > 0 || strlen($caption) > 0) : ?>
            <div class="post-wrap-meta">
                <span><?php echo $sub_caption; ?></span>
                <p class="slider-caption-text"><?php echo $caption; ?></p>
            </div>
          <?php endif ?>
        </div>

        <!-- output the modal -->

        <div style="display: none;" class="standard__modal" id="SliderModal<?php echo $slidercount; ?>">
            <?php echo $lightboxasset ?>
            <p class="slider-caption-text">
              <?php echo $lightboxassetcaption ?>
            </p>
        </div>

        <?php
          $slidercount ++;
          endwhile;
        ?>
      <?php
      endwhile;
    wp_reset_postdata();
  endif;
}

I hope to be able to pass the sliderId var to this function and return a fully functioning slider (there is a small Javascript function I need to add to this HTML as well).

Many thanks in advance to anyone whole can help with this.

Read more here: Using Shortcode to Query Custom Post Type and Return Carousel

Leave a Reply

Your email address will not be published. Required fields are marked *