CODEWITHSUNDEEP
phphtmlcsswordpresstwitter-bootstrap
SepticReVo
SepticReVo

Reputation: 45

CSS Code Structure with PHP Loops

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 :)

Upvotes: 0

Views: 61

Answers (1)

Andi North
Andi North

Reputation: 897

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.

Upvotes: 1

Related Questions