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 WordPress Theme Development Adding a Blog to a WordPress Theme The single.php Page

Posted by jazib shahzad
jazib shahzad
Courses Plus Student 268 Points

Blog Page is not same as in video

I have the same code in single.php file as in video but my blog page is not same as shown in the video as heading and text appears first and then pic. Can anyone HELP? Code of single.php is:

<?php get_header(); ?>

   <section class="two-column row no-max pad">
      <div class="small-12 columns">
        <div class="row">
          <!-- Primary Column -->
          <div class="small-12 medium-7 medium-offset-1 medium-push-4 columns">
            <div class="primary">

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

          <article class="post">

                <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
                <ul class="post-meta no-bullet">
                  <li class="author">
                      <span class="wpt-avatar small">
                        <?php echo get_avatar( get_the_author_meta( 'ID' ), 24 ); ?>
                      </span>
                      by <?php the_author_posts_link(); ?>
                  </li>
                  <li class="cat">in <?php the_category( ', ' ); ?></li>
                  <li class="date">on <?php the_time('F j, Y'); ?></li>
                </ul>
                <?php if( get_the_post_thumbnail() ) : ?>
                <div class="img-container">
                  <?php the_post_thumbnail( 'large' ); ?>
                </div>
                <?php endif; ?>
                <?php the_content(); ?>
                </article>

          <?php endwhile; else : ?>

        <p><?php _e( 'Sorry, nopages found.' ); ?></p>

         <?php endif; ?>

                </div>
            </div>

            <!-- Secondary Column -->
            <div class="small-12 medium-4 medium-pull-8 columns">
                <div class="secondary">
                    <h2 class="module-heading">Sidebar</h2>
        </div>
    </div>
  </div>
</section>
<?php get_footer(); ?>
Jean Bosio
Jean Bosio
1,048 Points
Jean Bosio
Jean Bosio
1,048 Points

It seems the secondary column is lacking a div tag - and does not line up properly. Try adding a div after the line "<h2 class="module-heading">Sidebar</h2>". That div should line up with "<div class="secondary">" Move the div below that, so that it lines up with "<div class="small-12 medium-4 medium-pull-8 columns">"

Also, your php block is not ligned up correctly: it should be moved towards the right, indented from the primary class div (<div class="primary">).