Working Bootstrap Carousel Conversion to WP - Technical Questions

Question

I have coded a working Bootstrap carousel, it needs to be converted to WP. It's a small chunk of the site, but as a Wordpress newbie, am stuck in understanding the technical issue.

So here's what I am trying to do:

To show all those posts that have a featured image uploaded to show as a part of the Bootstrap carousel, then to limit the posts per page as needed.

As a first step, I thought to not use WP_Query for this purpose. And try the regular posts loop.

<?php if(have_posts()) {
          ?>
            <div class="carousel-inner" role="listbox">
              <?php
                $postNumber = 0;
                    while(have_posts()) {

                          the_post(); ?>
  <!-- 1st Slide  -->
  <div class="carousel-item <?php echo $postNumber == 0 ? 'active' : ''; ?>">

    <!-- Section Featured Posts Start -->
    <div class="featured">
      <div class="container">
        <div class="row text-center">
          <div class="col-12 m-auto pt-5">

            <?php if(has_post_thumbnail()) {  ?>

So I use has_post_thumbnail() as a check to only include those posts which has a featured thumbnail attached to show these in carousel. If I attach an active class to carousel-item div, all of these posts display at once in carousel.

And if I use flag, such as $postNumber to initiate it at 1 and for the while loop, check to see if $postNumber is 1 then use a condition to add 'active' to carousel-item div. And reset the $postNumber to 0 at the end of first loop. It doesn't quite work correctly. So I tried using current_post with using a custom query but that doesn't work. Either no content is shown in the carousel or otherwise carousel displays but it neither moves automatically but only on clicking back arrow, it moves once.

Another issue, is how to dynamically set indicators of carousel to display as per the number of posts. It's easy if we limit no. of posts in query and use the same number here but if we can make this dynamic.

As a Wordpress newbie, I have learned a lot of different thing from using shortcodes, to child-themes and using Options API along with a number of other things for both themes and plugins. It was important to put these learnings in to action.

So I've designed a website from scratch in Photoshop, coded it in Bootstrap and now converting it to Wordpress. So this was one of the issues where I am stuck to progress further. Hope someone can help.

Thanks!

Answer 1

I had a similar situation recently, making a Bootstrap carousel dynamic.

Here's my functions.php code for that:

//Images Slider
function themename_slider_home_images_setup($wp_customize)
{
    $wp_customize->add_section('home-slider-images', array(
        'title' => 'Home Slider',
        ));

        $wp_customize->add_setting('home-slider-first-image');
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'home-slider-first-image',
            array(
                'label'      => __( 'First Image', 'theme_name' ),
                'section'    => 'home-slider-images',
                'settings'   => 'home-slider-first-image'
            )
        )
        );

        $wp_customize->add_setting('home-slider-second-image');
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'home-slider-second-image',
            array(
                'label'      => __( 'Second Image', 'theme_name' ),
                'section'    => 'home-slider-images',
                'settings'   => 'home-slider-second-image'
            )
        )
        );

        $wp_customize->add_setting('home-slider-third-image');
    $wp_customize->add_control(
        new WP_Customize_Image_Control(
            $wp_customize,
            'home-slider-third-image',
            array(
                'label'      => __( 'Third Image', 'theme_name' ),
                'section'    => 'home-slider-images',
                'settings'   => 'home-slider-third-image'
            )
        )
    );
}
add_action('customize_register', 'themename_slider_home_images_setup');

And for the template file:

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="<?php echo get_theme_mod('home-slider-first-image');?>" alt="Sinan" >
      </div>

      <div class="item header-image">
        <img  src="<?php echo get_theme_mod('home-slider-second-image');?>" alt="Sinan" >
      </div>

      <div class="item header-image">
        <img src="<?php echo get_theme_mod('home-slider-third-image');?>" alt="Sinan" >
      </div>
    </div>

    <!-- Left and right controls -->

  </div>

I bet there are more elegant ways to do this, but I'm new to WordPress custom theme development as well and this did the trick for me.

Edit: You can make other stuff editable, for instance the alt attribute, add captions to the slides, etc. using the same logic by adding more settings in the functions file and replacing HTML hard-coded attribute values with appropriate PHP tags which will appear in the customizer.

Hope this helps!