Well, not really a battle per se, more of a camaraderie or working relationship. Back in 2015 I wrote a similar tutorial on how to do this with the WordPress theme customizer… Any-who… one day I was thinking. Wouldn’t it be great if you could utilize the Bootstrap 4 Carousel with your latest WordPress blog posts by using featured images? Like, every time I post something new, it will replace the current “newest” image in the carousel — bump that to the second slot — and so on and so forth, giving the carousel a more dynamic use. Anyhow, I decided to run with this on a project I was recently a part of and I think you’ll like it.
The great thing about this tutorial is that, as long as you can get your users to utilize the “featured image” portion of the post, the rest is relatively simple. Even pulling in the_excerpt();, using rewind_posts(); to go back to the beginning of the loop, and other useful loop programming can be applied to the Bootstrap Carousel.
This all relies on a relatively simple administrative decision in page editing: change management (which can be difficult for some), but by using the built in WordPress “featured image” portion of a post — along with consistent image cropping — this Bootstrap Carousel / WordPress Loop combo works flawlessly.
Carousel Considerations:
The first thing we need to consider here is how many bootstrap carousel “items” we want to show. This is important because we need to use the WordPress hook rewind_posts(); to essentially make the loop — loop (super corn-ball, I get it 
), as seen here on Bootstrap’s website.
!important How many items you choose here will be reflected in your carousel. Choose three for a three item carousel, choose 10 if you want your visitors to fall off 
.
Another item to consider is how many categories your blog has. If you want to show all categories or just one, this will work great. If you’re looking for more flexibility within the WordPress Loop, I’m sure adding the right hooks and arguments to your code will produce results.
Also consider sizing of images! This will be particular to your own build-out. For my tutorial and example, I’m using a Bootstrap 4 “container-lg” which is a full-bleed (non-guttered) container. So, there will be some overlapping of boundaries at times but good CSS and mobile first techniques make this very do-able. I’m sure using non-mobile first methods will work just as well using a guttered column and the “img-fluid” class, but that decision is up to you.
I made my carousel into an include file that is being called in on “front-page.php”, so the gists I’m posting are able to be used to create an include, or, just use the code in-page, once again, your decision as a designer.
Carousel Indicator Loop:
The PHP behind this tutorial is not very complicated. The most complicated part being that we’re running two separate loops using WP_Query(); rather than the standard WordPress Loop. One loop to loop the “carousel-indicators” at the bottom, another to loop the “carousel items” (images and text) themselves.
So, considering the task at hand, the first thing I want to do is create any custom arguments I want to pass into the loop at the top of my include page as seen below:
Using these arguments, I can specify the post-type or category and it allows for further customization.
From here, we’re going to need to start the carousel HTML portion that will call in the specific WordPress hooks associated with the carousel indicators only. Since I am using WP_Query();, I can use the arguments defined in the above gist. You will also see rewind_posts(); used below as once we reach the end of our loop, we want to “rewind” back to the first post or “carousel-item” and start again. Remember, we’re using only WordPress Codex hooks here, nothing custom.
What were doing with the code below (considering in PHP , 0 actually equals 1 or “current” or in this case “active”) is, we’re creating a loop that simply changes the active state of the bootstrap carousel indicators at the bottom of the carousel. This is the sole purpose of our fist loop.
You can see that it’s simply an ordered list with one line item.
The class assignment being passed: if ( $the_query->current_post == 0 ) : active endif; is using PHP to loop through our items and apply the active Bootstrap class to the current carousel item. This is what makes the indicator “brighter” or seem “lit up” as seen in the above image. This is important as we want the carousel indicators to sync with the carousel items which we will visit next.
Carousel Item Loop:
In following Bootstrap’s instructions on carousel creation, the next step is to combine some more HTML and PHP starting with the div class “carousel-inner”. At the onset of this div, I took the opportunity to pass some more arguments into the loop. I created an “if” statement to check for a post that meets certain criteria defined below as $thumbnail_id, $thumbnail_url, and lastly $thumbnail_meta to pull in the image “alt” text as these items will need to be referenced in the “featured-image” carousel loop.
Once again, keep in mind these are query loops with custom parameters, that’s why you’re seeing if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); when a standard WordPress loop does not use $the_query argument. This being a great use case for custom loop creation by querying the loop for data rather than just calling in everything at once.
Although, there are some limitations to consider using query loops, specifically when it comes to pagination. But since we’re not paginating here, just looping through 5 latest posts (oh by the way, I chose 5 posts to show at most in my settings), these custom queries won’t be an issue.
Once we’ve made it this far, there’s not much left to do. We need to set up the HTML accordingly to Bootstrap specifications while working in our custom loop queries. Here’s the final code snippet to close out the deal:
Let me explain what’s going on above. So here we are with the required “carousel-item” class where I use the same method applied to the “carousel-indicators”, just worded a bit differently but the key — once again — being the if ( $the_query->current_post == 0 ) : active endif; which is applying the “active” class again but this time to the carousel-item class itself. This is needed for a Bootstrap 4 Carousel to work correctly.
After setting the active state of the item, I check to see if the post has a “thumbnail” or as called in the page editor “featured-image”. If no image exists as a thumbnail or featured image for the post, no image will appear. This will look wonky. A good fallback to this would be to define a static “default” image and use an } else { in the thumbnail check that would call a specified image if no image existed.
For the purpose of this tutorial, I’m not going to cover that now. Maybe if someone asks in the comments 
.
Alternatively, if a post thumbnail does exist, I create a link to the post that wraps the image by using the_permalink(); and the the_title_attribute();, and the_post_thumbnail(); itself which I have set the image size to “full”. Setting your thumbnail size to full on a responsive website is a pretty safe bet, but WordPress offers different thumbnail sizes that you can manually set.
Next, I want to call in my post title and excerpt so I set up a container class to handle those calls. As you can see, I’m using the standard WordPress the_title(); and the_excerpt(); to grab this data from the current post. I’m also using the Bootstrap 4 class “d-none d-sm-block” to hide the excerpt text on mobile devices.
Conclusion:
Using this tutorial allows for easy dynamic Bootstrap Carousel content creation by using a combination of your latest blog posts and featured images or post thumbnails. Try it out for yourself and let me know how it works for you.
the_excerpt(); automatically produces a “Read More” button or link — as mine was programmed to do — here’s a great fix. Instead of using just the_excerpt(); use this:
This will strip the “More” button from the excerpt only when used in the above manner. Anywhere else on your site where you’re calling in the excerpt will not be affected.
Lastly, I’m not a fan of the “carousel controls” — the right and left directional arrows on the carousel — so you will see that portion of the carousel code missing in case you were wondering.
Result:
I hope you found this tutorial useful. I look forward to comments and questions. Happy coding everyone.
The post Bootstrap Carousel Meets WordPress Loop in Epic Battle! appeared first on benkaminski.com.
