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

Christopher Paccione
Christopher Paccione
14,831 Points
Posted by Christopher Paccione
Christopher Paccione
14,831 Points

From Bootstrap to WordPress - col-md-4 breaking

Has anyone else had trouble with the custom widgets for "From Bootstrap to WordPress"? I've watch the video 5 times, and I still can't find my error. Maybe I need sleep! :)

When I reload the front page.php the "front-page left" widget is fine, but the center and right are not. They align left, and go straight down the page as if the bootstrap classes are not there. Here is my code. 

    <div class="container">
      <!-- Example row of columns -->
   this is front-page.php
      <div class="row">

        <div class="col-md-4">          
          <?php if ( dynamic_sidebar( 'front-left' ) ); ?>
        </div>

        <div class="col-md-4">
          <?php if ( dynamic_sidebar( 'front-center' ) ); ?>
       </div>

        <div class="col-md-4">     
          <?php if ( dynamic_sidebar( 'front-right' ) ); ?>
        </div>

      </div>


  <?php get_footer(); ?>

and...

function create_widget($name, $id, $description) {

    register_sidebar(array(
        'name' => __( $name ),
        'id' => $id,
        'description' => __( $description ),
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));

}

create_widget( 'Front Page Left', 'front-left', 'Displays on the left of the homepage' );
create_widget( 'Front Page Center', 'front-center', 'Displays on the center of the homepage' );
create_widget( 'Front Page Right', 'front-right', 'Displays on the right of the homepage' );

?>

I can also add a screenshot if someone can tell me how that is done.

Thanks!

Chris

2 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Chris,

At first glace you appear to be missing the ending arrow > in 'after_widget' => '</div', and the closing div for your .container wrapper.

Christopher Paccione
Christopher Paccione
14,831 Points
Christopher Paccione
Christopher Paccione
14,831 Points

Thank you sir, you are correct. I forgot to add the right arrow to 'after_widget'. The container was closed in the footer.

Thanks for the extra set of eyes!