0

Can anyone help me with this?

<div class="container">

    <div class="row">
          <div class="col-sm-8">

            <div class="row" style="margin-bottom: 30px;">

                        <div class="col-xs-12 col-sm-6">

                            newest article

                        </div>

                        <div class="col-xs-12 col-sm-6">

                            article

                        </div>

            </div>

        </div>

    </div>

    <div class="col-sm-4">

                <div class="row">

                    <div class="col-xs-12 col-sm-12">

                            this is for the sidebar

                    </div>

                </div>
    </div>

What I'm trying to achieve is to post articles in 2 columns and the other column is for the sidebar. I've read online for "php loop" but I have very limited knowledge with php.

Improve this question
4
  • 1
    I posted an answer below, but now I am wondering if that is really what you are asking. Or are you asking about how use this with a wordpress loop to output posts and content?
    – skribe
    Feb 25, 2015 at 18:49
  • 2
    If are wanting to know how to use the loop here we need to know how do you want the posts to show? Newest post, top left column, next newest post, top right column, and alternating back and forth? Or All newest posts left column, older posts right column?
    – skribe
    Feb 25, 2015 at 18:57
  • 1
    Hello thanks for your reply but it seems like you missunderstood me. I need the posts to be Newest post, top left column, next newest post, top right column, and alternating back and forth
    – user68181
    Feb 25, 2015 at 19:10
  • 1
    Okay Now I understand what you want, and updated my answer below
    – skribe
    Feb 25, 2015 at 21:15

1 Answer 1

Reset to default
1

The simplest way to go about this is to use "the loop" to also output your columns. So each post is in a column of its own, and they simply stack up on each other. Then when you reach bootstraps smaller break points the posts on the right will move directly under the post on the left. Like the illustration below. Which is the behavior you want. 

---------------          ---------
Post 1 | Post 2           Post 1
Post 3 | Post 4  Becomes  Post 2
Post 5 | post 6           Post 3
---------------           Post 4
                          etc.
                          -------

There are some methods to only out put every other post into one column, and then output the rest in the other. The problem then would be that on narrower screens when the columns all stack in one column all of the right hand column would move under the left. Which I don't know why anyone would want. Like this...

---------------          ---------
Post 1 | Post 2           Post 1
Post 3 | Post 4  Becomes  Post 3
Post 5 | post 6           Post 5
---------------           Post 2
                          Post 4
                          Post 6   
                          -------

So this is how I would use "the loop" and mix it with bootstrap classes. 

      <div class="row"> <!-- MAIN ROW START***** -->
         <div class="col-sm-8"> <!-- article columns -->
            <div class="row" style="margin-bottom: 30px;">
               <?php if (have_posts()) : while (have_posts()) : the_post();?> 
                 <div class='<?php echo 'col-xs-12 col-sm-6'; ?>'>
                   <h2><?php the_title(); ?></h2>
                   <p><?php the_content(); ?></p>
                 </div>
              <?php endwhile; endif; ?>
             </div>
          </div> <!-- article columns end -->

          <div class="col-sm-4"> <!-- Sidebar Start-->
            <div class="row">
               <div class="col-xs-12 col-sm-12">
                                this is for the sidebar
                </div>
            </div> 
          </div><!-- Sidebar End -->
       <div> <!-- MAIN ROW END -->

Improve this answer
1
  • Thank you so much! It worked! Although I removed one div from the main row and added it in the sidebar. Thanks again!
    – user68181
    Feb 25, 2015 at 21:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.