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!

$299 Affordable Web Design WordPress