Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress From Bootstrap to WordPress Add Bootstrap Components to WordPress Theme Setting Up a Bootstrap Slideshow Carousel

Selina Meghji
PLUS
Selina Meghji
Courses Plus Student 260 Points

I am unable to see the carousel in my blog page, I only see the left and right arrow.

Here is the home.php code which I cut and paste from your download file.

What goes in the theme.js folder? It is currently empty.

<?php get_header(); ?>

<div class="container">
<div class="row">

  <div class="col-md-9">

    <div class="page-header">
      <h1><?php wp_title(''); ?></h1>
    </div>


    <?php

      $args = array(
        'post_type'     => 'post',
        'category_name' => 'featured'
      );
      $the_query = new WP_Query( $args );

    ?>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        <li data-target="#carousel-example-generic" data-slide-to="<?php echo $the_query->current_post; ?>" class="<?php if( $the_query->current_post == 0 ):?>active<?php endif; ?>"></li>

        <?php endwhile; endif; ?>
      </ol>

      <?php rewind_posts(); ?>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">

        <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        <div class="item <?php if( $the_query->current_post == 0 ):?>active<?php endif; ?>">

          <?php
            $thumbnail_id = get_post_thumbnail_id(); 
            $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
            $thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true);                
          ?>
          <a href="<?php the_permalink(); ?>"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?>"></a>
          <div class="carousel-caption"><?php the_title(); ?></div>
        </div>

        <?php endwhile; endif; ?>

      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>




    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

      <article class="post">

        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p><em>
          By <?php the_author(); ?> 
          on <?php echo the_time('l, F jS, Y');?>
          in <?php the_category( ', ' ); ?>.
          <a href="<?php comments_link(); ?>"><?php comments_number(); ?></a>
        </em></p>            

        <?php the_excerpt(); ?>

        <hr>

      </article>


    <?php endwhile; else: ?>

      <div class="page-header">
        <h1>Oh no!</h1>
      </div>

      <p>No content is appearing for this page!</p>

    <?php endif; ?>


  </div>

  <?php get_sidebar( 'blog' ); ?>

</div>

<?php get_footer(); ?>

Thank you. I really enjoy the tutorial.

Selina

6 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

If you have everything written properly, it should just work. Do you have a link to your site by chance?

Selina Meghji
PLUS
Selina Meghji
Courses Plus Student 260 Points

Hello Zac,

I redid your tutorial with the code and got it working. I am now working on your Wordpress Theme Development and I am appreciating it with more depth, having the background from this tutorial. I bought a Wordpress theme and my goal is to customize it.

Cheers,

Selina

Selina Meghji
PLUS
Selina Meghji
Courses Plus Student 260 Points

Hello Zac,

I redid your tutorial with the code and got it working. I am now working on your Wordpress Theme Development and I am appreciating it with more depth, having the background from this tutorial. I bought a Wordpress theme and my goal is to customize it.

Cheers,

Selina

Selina Meghji
PLUS
Selina Meghji
Courses Plus Student 260 Points

Hello Zac,

I redid your tutorial with the code and got it working. I am now working on your Wordpress Theme Development and I am appreciating it with more depth, having the background from this tutorial. I bought a Wordpress theme and my goal is to customize it.

Cheers,

Selina

Selina Meghji
PLUS
Selina Meghji
Courses Plus Student 260 Points

Hello Zac,

I redid your tutorial with the code and got it working. I am now working on your Wordpress Theme Development and I am appreciating it with more depth, having the background from this tutorial. I bought a Wordpress theme and my goal is to customize it.

Cheers,

Selina

Selina Meghji
PLUS
Selina Meghji
Courses Plus Student 260 Points

Hello Zac,

I redid your tutorial with the code and got it working. I am now working on your Wordpress Theme Development and I am appreciating it with more depth, having the background from this tutorial. I bought a Wordpress theme and my goal is to customize it.

Cheers,

Selina