Getting WordPress to work with Bootstrap carousel

  • Resolved jtm12

    (@jtm12)


    9 years ago

    I am so close to getting this to work, but there’s one little problem.

    My carousel loop is getting the featured image attached to four posts with the category of “frontpage.”

    The Bootstrap carousel needs the first div to have the class of “active,” so I am looping through one post to get that; then I’m using “do not duplicate” to skip the first post when I loop through the others.

    I have this code:

    <div class="container col-xs-6 col-sm-4">
<div class="carousel slide" id="featured">

	<ol class="carousel-indicators" style="bottom:-50px;">
		<li style="background-color:#ccc;" data-target="#featured" data-slide-to="0" class="active"></li>
		<li style="background-color:#ccc;" data-target="#featured" data-slide-to="1"></li>
		<li style="background-color:#ccc;" data-target="#featured" data-slide-to="2"></li>
		<li style="background-color:#ccc;" data-target="#featured" data-slide-to="3"></li>
	</ol>
	<div class="carousel-inner">

	<?php $args = array( 'category_name' => 'frontpage', 'posts_per_page' => 1 ); ?>

	<?php $my_query = new WP_Query( $args );

		while ( $my_query->have_posts() ) : $my_query->the_post();
		$do_not_duplicate = $post->ID; ?>
			<div class="item active">
				<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
			</div>
		<?php endwhile; ?>

		<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
			if ( $post->ID == $do_not_duplicate ) continue; ?>
				<div class="item">
					<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
				</div>
			<?php endwhile; endif; ?>
	</div><!-- carousel-inner -->

	<a class="left carousel-control" href="#featured" role="button" data-slide="prev">
	<span class="glyphicon glyphicon-chevron-left"> </span>
	</a>
	<a class="right carousel-control" href="#featured" role="button" data-slide="next">
	<span class="glyphicon glyphicon-chevron-right"> </span>
	</a>

</div><!-- carousel -->
</div><!-- container -->

    The problem is the second loop is picking up posts from all categories, not just those with the frontpage category.

    If I change the first line of the second loop to:

    <?php if ( $my_query->have_posts() ) : while ( $my_query->have_posts() ) : $my_query->the_post();
			if ( $post->ID == $do_not_duplicate ) continue; ?>

    … I break it. I don’t get the last three images at all.

    If this is the wrong approach, I’m happy to try something else. Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Ganesh Paygude

    (@ganeshpaygude)

    Hello jtm12 Please try the below updated code it will definitely help you:

    <div class=”container col-xs-6 col-sm-4″>
    <div class=”carousel slide” id=”featured”>

    <ol class=”carousel-indicators” style=”bottom:-50px;”>
    <?php
    $args = array( ‘category_name’ => ‘frontpage’, ‘posts_per_page’ => 1 );
    $my_query = new WP_Query( $args );
    $banner_count = 0;
    while ( $my_query->have_posts() ) : $my_query->the_post();

    if( $banner_count == 0 ){
    $active_item=”active”;
    }
    else
    {
    $active_item=””;
    }
    ?>
    <li style=”background-color:#ccc;” data-target=”#featured” data-slide-to=”<?php echo $banner_count; ?>” class=”<?php echo $active_item; ?>”>
    <?php $banner_count++; endwhile; ?>

    <div class=”carousel-inner”>

    <?php $my_query = new WP_Query( $args );
    $banner_count = 0;
    while ( $my_query->have_posts() ) : $my_query->the_post();
    if( $banner_count == 0 ){
    $active_item=”active”;
    }
    else
    {
    $active_item=””;
    }
    ?>
    <div class=”item <?php echo $active_item; ?>”>
    “><?php the_post_thumbnail(); ?>
    </div>
    <?php $banner_count++; endwhile; ?>

    </div><!– carousel-inner –>


    <span class=”glyphicon glyphicon-chevron-left”> </span>


    <span class=”glyphicon glyphicon-chevron-right”> </span>

    </div><!– carousel –>
    </div><!– container –>`

    Ganesh Paygude

    (@ganeshpaygude)

    <div class=”container col-xs-6 col-sm-4″>
    <div class=”carousel slide” id=”featured”>

    <ol class=”carousel-indicators” style=”bottom:-50px;”>
    <?php
    $args = array( ‘category_name’ => ‘frontpage’, ‘posts_per_page’ => 1 );
    $my_query = new WP_Query( $args );
    $banner_count = 0;
    while ( $my_query->have_posts() ) : $my_query->the_post();

    if( $banner_count == 0 ){
    $active_item=”active”;
    }
    else
    {
    $active_item=””;
    }
    ?>
    <li style=”background-color:#ccc;” data-target=”#featured” data-slide-to=”<?php echo $banner_count; ?>” class=”<?php echo $active_item; ?>”>
    <?php $banner_count++; endwhile; ?>

    <div class=”carousel-inner”>

    <?php $my_query = new WP_Query( $args );
    $banner_count = 0;
    while ( $my_query->have_posts() ) : $my_query->the_post();
    if( $banner_count == 0 ){
    $active_item=”active”;
    }
    else
    {
    $active_item=””;
    }
    ?>
    <div class=”item <?php echo $active_item; ?>”>
    “><?php the_post_thumbnail(); ?>
    </div>
    <?php $banner_count++; endwhile; ?>

    </div><!– carousel-inner –>

    <span class=”glyphicon glyphicon-chevron-left”> </span>

    <span class=”glyphicon glyphicon-chevron-right”> </span>

    </div><!– carousel –>
    </div><!– container –>`

    Thread Starter jtm12

    (@jtm12)

    Thank you. That was a much smarter way to do it.

    I made a few small tweaks. In the first loop, posts per page needed to be 4 to get it to generate 4 list items.

    I will repost the final code that is working.

    Again, thank you very much.

    <div class="container col-xs-6 col-sm-4">
<div class="carousel slide" id="featured">

<ol class="carousel-indicators" style="bottom:-50px;">
<?php
$args = array( 'category_name' => 'frontpage', 'posts_per_page' => 4 );
$my_query = new WP_Query( $args );
$banner_count = 0;
while ( $my_query->have_posts() ) : $my_query->the_post();

if( $banner_count == 0 ){
$active_item="active";
}
else
{
$active_item="";
}
?>
<li style="background-color:#ccc;" data-target="#featured" data-slide-to="<?php echo $banner_count; ?>" class="<?php echo $active_item; ?>"></li>
<?php $banner_count++; endwhile; ?>
</ol>

<div class="carousel-inner">

<?php 

$my_query = new WP_Query( $args );
$banner_count = 0;
while ( $my_query->have_posts() ) : $my_query->the_post();
if( $banner_count == 0 ){
$active_item="active";
}
else
{
$active_item="";
}
?>
<div class="item <?php echo $active_item; ?>">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
</div>
<?php $banner_count++; endwhile; ?>

</div><!-- carousel-inner -->

	<a class="left carousel-control" href="#featured" role="button" data-slide="prev">
	<span class="glyphicon glyphicon-chevron-left"> </span>
	</a>
	<a class="right carousel-control" href="#featured" role="button" data-slide="next">
	<span class="glyphicon glyphicon-chevron-right"> </span>
	</a>

</div><!-- carousel -->
</div><!-- container -->

    `

    Ganesh Paygude

    (@ganeshpaygude)

    Welcome.I hope my given code stuff works for you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Getting WordPress to work with Bootstrap carousel’ is closed to new replies.