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

John Hartney
John Hartney
2,893 Points
Posted by John Hartney
John Hartney
2,893 Points

Carousel not working - bootpress to wp

Thanks in advance for any help as this is doing my head in

I migrated my course files to a live web server to make this a little easier for others to troubleshoot. LIVE SITE HERE The error is...

Uncaught Type: Cannot read properly 'offsetWidth' of undefined

If you inspect element in chrome and select console you can see the error (blog page) with java and it says version 4.1 The course is using 3.1.1

I must of missed something? java version maybe?

  • JH

6 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

I just looked at the link and am not seeing any JS errors in the console.

John Hartney
John Hartney
2,893 Points
John Hartney
John Hartney
2,893 Points

The error is on the blog page? I assume this error has something to do with why the carousel is not working?

alt text

I don't have a "bootstrap.js" file in the /js folder so this must be coming from a link and I don't see a link in the php files relating to the "bootstrap.js" file in the screenshot?

Note the version 4.1

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

It looks like that file is coming from a plugin. Are you coding this from scratch or using a plugin to add this functionality?

John Hartney
John Hartney
2,893 Points
John Hartney
John Hartney
2,893 Points

Hi Zak,

From scratch. I followed through the Video course step by step.

I just now disabled all the plugins but still the same result, alt text I'll leave it in this state so you may check it out ; )

developers view

Rant begins here - I'm pretty sure I have installed only what the course requires, although I added some variations in the style.css and functionality for uploading a header image with 

add_theme_support( 'custom-header' );

A bit of fun and not that difficult with respect to the php though the CSS was tricky.

Before I migrated the site to my webserver I got frustrated with the carousel not working so I copied much of the project files code across to my files, only to achieve the same result? - and ends here lol.

On the up side, I'm picking up new skills troubleshooting so it's all good : )

- JH

John Hartney
John Hartney
2,893 Points
John Hartney
John Hartney
2,893 Points

Given that I copied almost all of the project files across to the server I'm now struggling to understand where to go from here?

The site is right there for all to see yet know one has the answer?

How about I give away a silver hosting package for one year on my webserver to the first person with the correct answer to the this problem, any takers?

John Hartney
John Hartney
2,893 Points
John Hartney
John Hartney
2,893 Points

Seeing as I'm getting no help with this, I'll pause my account again until I figure it out for myself.

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi John,

I was able to reproduce your error with a custom html page i made.

<html>
<head>
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script src='bootstrap-3.3.2-dist/js/bootstrap.min.js'></script>
<link href='bootstrap-3.3.2-dist/css/bootstrap.min.css' rel='stylesheet'/>
<style>
    #carousel-example-generic{
        width:1000px;
        margin: 0 auto;
    }

    #slide1{
        width:1000px;
        height:400px;
        background-color: black;
    }
    #slide2{
        width:1000px;
        height:400px;
        background-color: blue;
    }
    #slide3{
        width:1000px;
        height:400px;
        background-color: red;
    }
</style>
</head>
<body>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>


        <!-- Wrapper for slides -->
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active" id='slide1'>

            </div>
            <div class="item" id='slide2'>

            </div>
            <div class="item" id='slide3'>

            </div>
        </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>
</body>
</html>

Now this page works but if you comment out this section:

<div class="carousel-inner" role="listbox">
            <!-- <div class="item active" id='slide1'>

            </div>
            <div class="item" id='slide2'>

            </div>
            <div class="item" id='slide3'>

            </div> -->
        </div>

it will trow the same error you are experiencing. The trouble seems to be the fact that you dont have any slides. Try adding a few like i did and see if you still have issues. And dont forget to add this part as well:

<!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
John Hartney
John Hartney
2,893 Points
John Hartney
John Hartney
2,893 Points

HI Hugo,

I can't tell you how much I appreciate you taking the time to try and solve this puzzle Hugo I'm not sure how to apply your fix or which file to edit?

Here is a copy of the page home.php, it's been so long since I started the bootstrap to wp course that I'm now a little confused?

           <?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(); ?>```

Zak has been no help whatsoever and you would think teachers would care about such things and not just leave it to the pupils to solve but thats another story.

It makes me angry when every place I go on the net I see Treehouse advertizing but they don't spend much time helping their students in situations like this. I have paused my account indefinitely in protest for getting no help, when I emailed them the answer was, we understand, good luck.

I'm looking into Linda and other systems to see if they support their students who need it.

Sorry for beeing a bit of a n00b
Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

It seems the issue is within the wordpress loop that gets the posts.

<!-- 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>

This piece of code is not working properly. If you use inspect element in chrome you see this:

<!-- Indicators -->
          <ol class="carousel-indicators">
                      </ol>


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


          </div>

So the list items need for the indicators and the divs with the slides are not being created. This causes the carousel to throw an error.

I will need some time to see if i can find a solution. I will create a test environment and try to reproduce your error and then fix it.

John Hartney
John Hartney
2,893 Points
John Hartney
John Hartney
2,893 Points

Your a bloody Gem Mate...

G'day Hugo,

I don't mind giving you admin access to the live install as I have all the same content on my local com.

Can you get an account setup HERE and I'd also like to give you a free account, I'll PM the WP pass from getsited.org website.

Regards

  • JH
Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

You are in Melbourne, Im in Syd. I prefer to do my own. The reasoning behind it is that I didn't do that course yet and i want to follow along just to make sure the problem isn't somewhere else.

John Hartney
John Hartney
2,893 Points
John Hartney
John Hartney
2,893 Points

Sure m8,

I understand why you want to do your own bootstrap to WP, the free webspace offer still stands. Instant access to files without needing passwords & what's more - you can live edit, it's quick and slick

You should check it out, it will save you a lot of time : )

Regards