asked on

creating 3 colum wordpress page template with bootstrap

Making a custom Wordpress page and using the while loop:

while ( have_posts() ) : the_post();

Open in new window

i want to make the output 2 colums

i use bootstrap grid in our code so i should be able to do

<div = row>
  <div = col-md-6>left
  <div = col-md-6>right
</div>

Open in new window

and the

%2 mod operator

Open in new window

but that doesn't seam to work

here is my current code

<div class="clearfix">&nbsp;</div>			 

<?php 
$counter = 1;
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<?php 
	$class = ($x%2 == 0)? 'RowWhiteBackground': 'RowGraybackground';
	?>
<?php 
       if ($counter == 1)
        {
               echo '<div  id="'.$counter.'" class="'.$class.'">';
		               echo  '<div class="col-md-4">';
					   ?>
					   	<div class="panel panel-primary">
							<div class="panel-heading"><h5><a href="<?php the_permalink(); ?>" style="color: #fff;" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5></div>
							<div class="panel-body">
							<img height="150" width="150" style="padding : 0px 10px 0px 10px;"  vspace="10" class="alignleft" alt="<?php the_title_attribute(); ?>" src="<?php echo catch_that_image()?>" />
							<?php echo get_the_excerpt(); ?> 
							</div>
						</div>
						<?php 
					    $counter++;
					   echo  '</div>';
        } else if ($counter == 2) {
		                echo  '<div class="col-md-4">';
					   ?>
					   	<div class="panel panel-primary">
						<div class="panel-heading"><h5><a href="<?php the_permalink(); ?>" style="color: #fff;" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5></div>
						<div class="panel-body">
							<img height="150" width="150" style="padding : 0px 10px 0px 10px;"  vspace="10" class="alignleft" alt="<?php the_title_attribute(); ?>" src="<?php echo catch_that_image()?>" />
							<?php echo get_the_excerpt(); ?> 
						</div>
						</div>

					   <?php 
					    $counter++;
					   echo  '</div>';
        } else if ($counter == 3) {
		                echo  '<div class="col-md-4">';
					   ?>
					   	<div class="panel panel-primary">
						<div class="panel-heading"><h5><a href="<?php the_permalink(); ?>" style="color: #fff;" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5></div>
						<div class="panel-body">
						<img height="150" width="150" style="padding : 0px 10px 0px 10px;"  class="alignleft" alt="<?php the_title_attribute(); ?>" src="<?php echo catch_that_image()?>" />
						<?php echo get_the_excerpt(); ?> 
						</div>
						</div>
					   <?php 
					   echo  '</div>';
              echo '</div>'; // closing row
              $counter = 0; //reset counter
        }
	
			 
$x++;
$counter++;
 endwhile; else : ?>
 	<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
 	<!-- REALLY stop The Loop. -->
 <?php endif; ?>

Open in new window

Chris Stanyon

If you want to output 2 columns, then just add the col-6 to your HTML. If you want to selectively style the rows, then you can use your modulus for that (I would suggest using odd/even as the class names - it will give you more flexibility when styling). Bear in mind that in Bootstrap, a column has to be a child of a row.

Have a look over this and see if it makes sense:

<?php $rowNum = 0; $colNum = 0; ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <?php if ($colNum % 2 == 0): //start the row ?>
    <div class="row <?= $rowNum % 2 == 0 ? 'even' : 'odd'?>">
    <?php endif; ?>

    <div class="col-6">
        <!-- do your column stuff in here -->
    </div>

    <?php if ($colNum % 2 == 1): $rowNum++; //end the row and bump the row number ?>
    </div>
    <?php endif; ?>

    <?php $colNum++; // bump the column number ?>

<?php endwhile; else; ?>

Open in new window

Timothy Golden

ASKER

that didnt work... PHP Parse error: syntax error, unexpected ';', expecting ':'

Timothy Golden

ASKER

also that didnt make 2 cols/ just one long list
this was the HTML output

<div id="content" role="main" class="clear">
<div class="row even">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row odd">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row even">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row odd">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row even">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row odd">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row even">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row odd">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row even">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row odd">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row even">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row odd">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row even">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row odd">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row even">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row odd">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row even">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row odd">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row even">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row odd">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
<div class="row even">
<div class="col-6">
<div style="padding: 10px; 10px; 10px; 10px;">
<h5>title goes here</h5>
<p>text gos here</p>
</div>
</div>
</div>
</div>

Open in new window

Chris Stanyon

Ah. Typo on line 18. Should be:

<?php endwhile; else: ?>

Open in new window

ASKER CERTIFIED SOLUTION

Timothy Golden

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Chris Stanyon

Hey Timothy,

I didn't miss the md-6. It looks like you're using an outdated version of bootstrap (3.xx). We're now upto 4.xx.

I think my comments are more of a solution than your own comment !

Timothy Golden

ASKER

we are using the version supplied with our theme

Timothy Golden

ASKER

change it to

<?php endwhile; else: endif; ?>

Open in new window

Chris Stanyon

And then you'd be missing out on the else part of your code:

endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>

<?php endif; ?>

Regarding Bootstrap - you might want to update that.

Still, it doesn't make my code any less of a solution to your original question.

Timothy Golden

ASKER

yep added the end if/else

Chris Stanyon

Still no acknowledgement of help with the solution ??

Timothy Golden

ASKER

@chris, your solution was 2 columns, i was hoping for 3 or 4 columns as was in my sample code

Chris Stanyon

From your question:

i want to make the output 2 colums

i use bootstrap grid in our code so i should be able to do

<div = row>
<div = col-md-6>left
<div = col-md-6>right
</div>

The point is, although I didn't give you a copy-paste answer (I don't do that), you seemed to ignore the fact that I'd provided any kind of solution to your problem, and instead chose your own "you missed the md" comment as the accepted solution - which it clearly isn't !!