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

Paul LeDuc
Paul LeDuc
7,844 Points
Posted by Paul LeDuc
Paul LeDuc
7,844 Points

Left sidebar no working as expected

I am working with WordPress and bootstrap theme development. I am having trouble getting the left sidebar to display as I would like:

What I want is a left sidebar col-md3 and the page content in a col-md-9.

here is what I have so far:

<?php /* Template Name: Front Page */ ?>

<?php if (!is_front_page() && !is_page()) : return; endif; ?>

<?php get_header(); ?>

<div class="container">

    <?php get_template_part('parts/top-wigets'); ?>

    <div class="row">

        <?php get_template_part('parts/loop'); ?>


    </div> <!-- row -->

    <?php get_template_part('parts/bot-wigets'); ?>

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

<?php get_footer(); ?>
```:php

The top widgets code looks like this:

```php
<?php if     ( get_page_template_slug( $post->ID ) == 'front-page-sidebar-left.php') : ?>

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

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

            <div class="col-md-6">
                <?php if ( !dynamic_sidebar('front-pos-2')) : echo '&nbsp'; endif; ?>
            </div>                  

            <div class="col-md-6">
                <?php if ( !dynamic_sidebar('front-pos-3')) : echo '&nbsp'; endif; ?>
            </div>                  

        </div>

    <?php endwhile; endif; ?>

The loop code is as follows:

<?php if     ( get_page_template_slug( $post->ID ) == 'front-page-sidebar-left.php') : ?>

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

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

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

            <div class="page-header">

                <h2><?php the_title(); ?></h2>

            </div>

            <?php the_content(); ?>

        <?php endwhile; else :?>

            <div class="page-header">

                <h2><?php echo 'No content found'; ?></h2>

            </div>

            <p>No content found</p>

        <?php endif; ?>

    </div>

The sidebar-left.php file contains:

<?php if (!is_front_page() && !is_page()) : return; endif; ?>

<div class="col-md-3 sidebar-left">

    <div class="col-md-12">
        <?php if ( !dynamic_sidebar('front-pos-1')) : echo '&nbsp'; endif; ?>
    </div>                  

    <div class="col-md-12">
        <?php if ( !dynamic_sidebar('front-pos-5')) : echo '&nbsp'; endif; ?>
    </div>                  

    <div class="col-md-12">
        <?php if ( !dynamic_sidebar('front-pos-9')) : echo '&nbsp'; endif; ?>
    </div>                  

</div>

The left sidebar displays above and to the left of the contents. I have watch the WoodPress Bootstrap course repeatedly. Especially, the section on creating a page with a sidebar. I must be missing something either in my code or in understanding how the page is created.

Any help would be appreciated.

Thank you,

2 Answers

Jinson Abraham
Jinson Abraham
1,700 Points
Jinson Abraham
Jinson Abraham
1,700 Points

Nested columns should be wrapped in .row . I think if you correct that your layout will work well.

Paul LeDuc
Paul LeDuc
7,844 Points
Paul LeDuc
Paul LeDuc
7,844 Points

Thank you for the reply. But I am afraid I do not understand? Could you please explain?

Jinson Abraham
Jinson Abraham
1,700 Points
Jinson Abraham
Jinson Abraham
1,700 Points

Hi Paul, What I meant is, when you add new columns within a parent column, they should be wrapped in the div.row. That is required for the bootstrap grid layout. For example in your frontpage template, you have two .col-md-6s inside a .col-md-9. These 2 .col-md-6s should be wrapped in a .row div. Same rule applies to all nested columns. Hope I was clear about it. Helpful reference

Paul LeDuc
Paul LeDuc
7,844 Points
Paul LeDuc
Paul LeDuc
7,844 Points

Thanks for clarifying. I will review the reference and re-code what I have.

Have a good day and thank you for the help.