CSS Code Structure with PHP Loops

Question

I'm trying to structure a wordpress search page to include a sidebar within a container that has the "row" class from the bootstrap css. My goal is for the posts to show up on the left side of the container and the sidebar I want to show up on the right. Currently, if the row container is within the loop, I get the same number of sidebars as I have posts. If I move the row container out of the loop, either the sidebar is at the bottom and the <"hr"> lines between each post are pushed to the right side of the container or if I use float on the sidebar containers, I don't get any <"hr"> lines at all.

Any insight is appreciated in pushing the <"hr"> lines to the left with their respective posts and keeping the sidebar on the right at full screen size. For reference, the sidebar is located within the include.php file at the bottom of the row container.

search page code:

<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header"><?php printf( __( 'Search Results for: %s' ), esc_html( get_search_query() ) ); ?></h1>
            <ol class="breadcrumb">
                <li><a href="#">Home</a>
                </li>
                <li class="active">Blog</li>
            </ol>
        </div>
    </div>
        <div class="row">
            <?php
            // Start the loop.
            while ( have_posts() ) : the_post(); ?>
            <div class="col-lg-8">
                <h3>
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h3>
                <p>Posted on <?php the_time('F j, Y'); ?> by <?php the_author_posts_link(); ?>
                </p>
                <p><?php the_excerpt(); ?></p>
                <a class="btn btn-primary" href="<?php the_permalink(); ?>">Read More <i class="fa fa-angle-right"></i></a>
            </div>
    <hr> 
    <?php endwhile; ?>
                                    <?php include 'include.php'; ?>
        </div>
    <div class="navigation"><p><?php posts_nav_link('','&laquo; Newer Posts','Older Posts &raquo;'); ?></p></div>
    <?php else: ?>
      <p><?php _e('Sorry, there are no posts.'); ?></p>
    <?php endif; ?>

<?php get_footer(); ?>

Thanks for any help and insight :)

Try moving <?php include 'include.php'; ?> after <?php endif; ?> The posts are part of an if/else statement that isn't closed until the endif is called. -- This is really just a guess since you haven't shown complete markup. There's no telling what HTML is within include.php. Simply stating "its the sidebar' is not enough. — Scott
– Scott, Commented Jul 16, 2016 at 21:14

Andi North · Accepted Answer · 2016-07-16 21:35:19Z

1

You need to move your <div class="col-lg-8"> outside of your while() statement so that you only have one grid column instead of each blog post being inside of its own grid column.

This is assuming that your sidebar had the class col-lg-4.

answered Jul 16, 2016 at 21:35

Andi North

9075 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

SepticReVo Over a year ago

Yes!! This solves my issue! I'm not sure how to get my navigation links above the include file, but this solves my initial problem. Thanks!

Andi North Over a year ago

Do you want the navigation links to be inside of .col-lg-8?

SepticReVo Over a year ago

Currently, it's out the entire .row. I put it before the .col-lg-4 container, and it just stacked on the right side on top of the .col-lg-4 container :/

Andi North Over a year ago

All you need to do is move the <div class="navigation">...</div> to just after the <?php endwhile; ?> and before the </div> that closes `.col-lg-8'.

Andi North Over a year ago

I've just added an answer for you on that question.

|

Collectives™ on Stack Overflow

CSS Code Structure with PHP Loops

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related