Start Free Trial

Andrew Spackman

asked on

Split wordpress loop

Hi,

I am trying to split the wordpress loop into to two rows like below


<div class="row1">
First post title and featured image
</div>



<div class="row2">
First post content/excerpt
</div>


Any ideas would be much appreciated.

Thanks,

Andrew

Andrew Spackman

ASKER

Ok, so I have tried nesting 2 loops to achieve my desired effect, It seems to work but is extremely slow.

This is the code I am using

<!-- Start WordPress Loop -->
	<?php $count=0; ?>
	
	<?php  $i = 0; echo '<div class="post-row first-post">';while ( have_posts() ) : the_post(); ?>
                    
    <?php if ($count==0) : ?>

            <div class="row-container"><h3 class="widget-title">Icon Row</h3>
            <?php endif; ?>
            	<div class="icon-row" style="display: inline-block;
float: left;">
                <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
                </div><!--icon-row-->
                <div class="clearfix"></div>
                <?php $count++; ?>
                    <?php if ($count==4 ||$wp_query->found_posts==0) : ?>
                    <?php $count=0; ?>
                    
          <!-- Start WordPress Loop -->  
                  
                    <?php $count=0; ?>
	
	<?php  $i = 0; echo '<div class="post-row first-post">';while ( have_posts() ) : the_post(); ?>
                    
    <?php if ($count==0) : ?>
                <div class="content-container">
                <?php endif; ?>
                	<p><?php the_content(); ?></p>
                </div>
                
                <?php $count++; ?>
                    <?php if ($count==4 ||$wp_query->found_posts==0) : ?>
                    <?php $count=0; ?>
					
             
                <?php endif; ?>
                <?php wp_reset_query(); ?>
                </div><!--row container-->
				<?php endwhile; ?>
                    
                    
                    <?php $count=0; ?>
                    
                    <?php endif;?>
                    <?php wp_reset_query(); ?>
                    <?php endwhile;?>

Open in new window

So I am trying to split the titles and content into two containers separate containers into rows of 4

Any help would be much appreciated

Thanks,
Andrew

so you want the layout to be left to right not vertical?

First post title and featured image| First post content/excerpt
Next post title and featured image| Next post content/excerpt

Andrew Spackman

ASKER

Im trying to split them into horizontal rows so it would be like the following

<div class="row-of-4">
<div class="top-container">
First post title and featured image
Second post title and featured image
Third post title and featured image
Fourth post title and featured image
</div><!--top container-->

<div class="bottom-container">
First post content
Second post content
Third post content
Fourth post content
</div><!--bottom container-->
</div><!--row of 4-->

<div class="row-of-4">
<div class="top-container">
Fifth post title and featured image
Sixth post title and featured image
Seventh post title and featured image
Eighth post title and featured image
</div><!--top container-->

<div class="bottom-container">
Fifth post content
Sixth post content
Seventh post content
Eighth post content
</div><!--bottom container-->
</div><!--row of 4-->

Open in new window

.........and so on

Andrew Spackman

ASKER

This is my page im having trouble with http://www.mabwealthmanagement.co.uk/service-category/services/

try replacing the loop ina template page with this
quick and dirty, css is inline, borders are for show

<?php if ( have_posts() ) : ?>
			<?php // get the number of posts
				if(!isset($wp_query)){
					global $wp_query;
				}
				$count =  $wp_query->post_count;
			 ?>
			<?php while ( have_posts() ) : the_post(); ?>
				<?php // current post index
				
					$index = $wp_query->current_post +1; // add 1 for proper modulus
					// start the wrapper
					if($index %4 == 1) {
						echo '<div style="border:1px solid black; padding: 10px 0px;margin: 10px 0px;">';
					}
					// inner wrapper float
					$float = "left";
					if(($index+1) % 4 == 0){
						$float = "right";
					}
					// create inner wrapper
					if($index %2 == 1) {
						echo '<div style="border:1px solid green; width:48%; float:' . $float . '; padding: 10px 0px;margin: 10px 0px;">';
					}
					
					// display the content
					?>
					<h2><?php the_title() ?></h2>
					<?php the_excerpt(); ?>
				
				<?php 
					// close inner wrapper
					if($index %2 == 0  || $index == $count) {
						echo '</div>';
						
					}
				// close outer wrapper - account for number of items not divisible by 4
				if($index % 4 == 0 || $index == $count){ // end a row
				echo '<br style = "clear:both;" />';
				echo '</div>';
				}?>
		<?php endwhile; else: ?>

			<p>Sorry, no posts to list</p>

		<?php endif; ?>

Open in new window

actually more like this ... changed the inner layout

<?php if ( have_posts() ) : ?>
			<?php // get the number of posts
				if(!isset($wp_query)){
					global $wp_query;
				}
				$count =  $wp_query->post_count;
			 ?>
			<?php while ( have_posts() ) : the_post(); ?>
				<?php // current post index
				
					$index = $wp_query->current_post +1; // add 1 for proper modulus
					// start the wrapper
					if($index %4 == 1) {
						echo '<div style="border:1px solid black; padding: 10px 0px;margin: 10px 0px;">';
					}
					// inner wrapper float
					$float = "left";
					if(($index+1) % 4 == 0){
						$float = "right";
					}
					/* // create inner wrapper
					if($index %2 == 1) {
						echo '<div style="border:1px solid green; width:48%; float:' . $float . '; padding: 10px 0px;margin: 10px 0px;">';
					}
					 */
					// display the content
					?>
					<p><?php the_title() ?> | <?php the_excerpt(); ?></p>
					
				
				<?php 
					/* // close inner wrapper
					if($index %2 == 0  || $index == $count) {
						echo '</div>';
						
					} */
				// close outer wrapper - account for number of items not divisible by 4
				if($index % 4 == 0 || $index == $count){ // end a row
				echo '<br style = "clear:both;" />';
				echo '</div>';
				}?>
		<?php endwhile; else: ?>

			<p>Sorry, no posts to list</p>

		<?php endif; ?>

Open in new window

Andrew Spackman

ASKER

I think there has been a misunderstanding, this is what I've been asked to replicate

http://www.lifetime.co.uk/wealth/

So 4 posts per row but there excerpts/content in another container below the row so that I can toggle these

you asked for a layout, you can use the code provided to achieve that layout. or buy that exact theme and save yourself the time and trouble of trying to rebuild it, however those types of themes tend to try to be all things to all people so have a lot of code/features you will never use that bloat the system

Andrew Spackman

ASKER

Ok, thank you. I have changed your script to show a container of 4 titles and just trying to get a container underneath with 4 descriptions. I have commented in the script below where im trying to add in another post count to output the descriptions. But I cant run a php script inside another php script. Do you know if there is a way to have 2 post count queries in one loop?

<?php if ( have_posts() ) : ?>
			<?php // get the number of posts
				if(!isset($wp_query)){
					global $wp_query;
				}
				$count =  $wp_query->post_count;
			 ?>
			<?php while ( have_posts() ) : the_post(); ?>
				<?php // current post index
				
					$index = $wp_query->current_post +1; // add 1 for proper modulus
					// start the wrapper
					if($index %4 == 1) {
						echo '<div style="border:1px solid black; padding: 10px 0px;margin: 10px 0px;"><div style="border:1px solid red; class="icons">';
					}
					// inner wrapper float
					$float = "left";
					if(($index+1) % 4 == 0){
						$float = "right";
					}
					
					// display the content
					?>
					<p><?php the_title() ?></p>
					
				
				<?php 
					
				// close outer wrapper - account for number of items not divisible by 4
				if($index % 4 == 0 || $index == $count){ // end a row
				
				
				
				
				echo '<br style = "clear:both;" />';
				echo '</div>'; //Icons DIV
				
				echo '<div style="border:1px solid green">descriptions
				
				//This is where im trying to get the 4 descriptions 

				</div>'; //Descriptions DIV
				
				
				
				
				echo '</div>'; //Main x4 DIV
				
				}?>
                
                
                
                
		<?php endwhile; else: ?>
        
        

			<p>Sorry, no posts to list</p>

		<?php endif; ?>

Open in new window

can you show me an example of the layout you are trying to get, what i am picturing

title1 title2 title3 title4
desc1 desc2 desc3 dec4

Andrew Spackman

ASKER

I have attached a diagram of what I'm trying to achieve. I want the desc1 desc2 etc to be full width after toggled and push the next row of 4 down

User generated image

ok, excellent, you still do not need multiple loops, i will need to write it up but what you will be doing is processing a single loop and saving title content to one variable and the description content to another variable, echo both vars, then start the next four items.

pseudo code
idx=0
loop start

titles[idx] = loop titles

descriptions[idx] = loop descriptions
idx++

loop ends

loop over idx
echo titles[idx]
echo descriptions[idx]

should have it tomorrow

Andrew Spackman

ASKER

That would be great if you can. My deadline is tomorrow, so ideally I would like to get it working before then

not ideal, can be impproved

<?php if ( have_posts() ) : ?>
			<?php // get the number of posts
				if(!isset($wp_query)){
					global $wp_query;
				}
				$count =  $wp_query->post_count;
				$titles = NULL;
				$descriptions = NULL;
			 ?>
			<?php while ( have_posts() ) : the_post(); ?>
				
				<?php // current post index
				
					$index = $wp_query->current_post; // add 1 for proper modulus
					
					$titles[$index] = get_the_title();
					$descriptions[$index] = get_the_excerpt();?>
			<?php endwhile; ?>
			<div id="main-wrapper" style="">
				<?php // output the boxes
				$desc = '';
				for($x=0;$x<$index; $x++){
					 
						if($x+1==1 || ($x)%4 ==0){
							echo '<div id="title-wrapper" style="border:1px solid blue; margin:10px 0px;">';
						}
						echo '<div id="ti1tle" style="border:1px solid yellow; width:24%; float:left; margin:10px 0px;">';
							echo $titles[$x];
						echo '</div>';
						$desc .= '<div id="description' . $index .'" style="border:1px solid cyan"> desciption' . $description[$x] . '</div>';
						if(($x> 1 && ($x+1)%4 == 0) || $x+1==$index){
							echo '<br style="clear:both;">';
							
							echo '<div id="desc-wrapper" style="border:1px solid green">' . $desc .'</div>';
							echo '</div>';
							
							$desc = '';
						}
					// close title wrapper
					
					
				}?>
			</div>
		
		<?php else: ?>
		
			<p>Sorry, no posts to list</p>

		<?php endif; ?>

Open in new window

Andrew Spackman

ASKER

That's great thank you. Is there a way to amend the script so it just keeps displaying in that format until the posts have finished as I think there is 9 in total.

the above should work with any number of posts, I tested with 12-16 posts

Andrew Spackman

ASKER

That's a bit odd as I have 9 but it only displays 8. Does it have to be increments of 4?

no, should handle anything.

SOLUTION

membership

This solution is only available to members.

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

Start Free Trial

Andrew Spackman

ASKER

Brilliant! I can now start adding in post ID for toggling and style to suit.

Andrew Spackman

ASKER

will I be able to pull through custom fields etc

yes, anything that is part of the post is available within the loop

you can change this

$titles[$index] = get_the_title();
$descriptions[$index] = get_the_excerpt();

to

$myposts[$index]['id'] = get_the_ID();
$myposts[$index]['title'] = get_the_title();
$myposts[$index]['description'] = get_the_excerpt();
// change 'my_custom_field' to the post meta field you want to look up
// - or -
//the appropriate ACF function if you are using advanced custom fields
$myposts[$index]['my_custom_field'] = get_post_meta(get_the_ID(), 'my_custom_field', TRUE');

then change the output to

<?php if ( have_posts() ) : ?>
			<?php // get the number of posts
				if(!isset($wp_query)){
					global $wp_query;
				}
				$count =  $wp_query->post_count;
				$titles = NULL;
				$descriptions = NULL;
			 ?>
			<?php while ( have_posts() ) : the_post(); ?>
				
				<?php // current post index
				
					$index = $wp_query->current_post; // add 1 for proper modulus
					
					$myposts[$index]['id'] = get_the_ID();
					$myposts[$index]['title'] = get_the_title();
					$myposts[$index]['description'] = get_the_excerpt();
				?>
			<?php endwhile; ?>
			<div id="main-wrapper" style="">
				<?php // output the boxes
				$desc = '';
				for($x=0;$x<=$index; $x++){
					 
						if($x+1==1 || ($x)%4 ==0){
							echo '<div id="title-wrapper-' . $myposts[$x]['id'] . '" style="border:1px solid blue; margin:10px 0px;">';
						}
						echo '<div id="title-' . $myposts[$x]['id'] . '" style="border:1px solid yellow; width:24%; float:left; margin:10px 0px;">';
							echo $myposts[$x]['title'];
						echo '</div>';
						$desc .= '<div id="description' . $myposts[$x]['id'] .'" style="border:1px solid cyan"> ' . $myposts[$x]['description'] . '</div>';
						if(($x> 1 && ($x+1)%4 == 0) || $x==$index){
							echo '<br style="clear:both;">';
							
							echo '<div id="desc-wrapper-' . $myposts[$x]['id'] . '" style="border:1px solid green">' . $desc .'</div>';
							echo '</div>';
							
							$desc = '';
						}
					// close title wrapper
					
					
				}?>
			</div>
		
		<?php else: ?>
		
			<p>Sorry, no posts to list</p>

		<?php endif; ?>

Open in new window

Andrew Spackman

ASKER

That's great, thank you. You can see what I've done here http://www.mabwealthmanagement.co.uk/service-category/services/

Although there seems to be an issue with the thumbnail and toggle and it's giving them all the same ID? not sure if I have done the get_the_ID(); part correct?

	<?php if ( have_posts() ) : ?>
       

			<?php // get the number of posts
				if(!isset($wp_query)){
					global $wp_query;
				}
				$count =  $wp_query->post_count;
				$titles = NULL;
				$descriptions = NULL;
				$id[$index] = get_the_ID();
				
			 ?>
			<?php while ( have_posts() ) : the_post(); ?>
				
				<?php // current post index
				
					$index = $wp_query->current_post; // add 1 for proper modulus
					$id[$index] = get_the_ID();
					$titles[$index] = get_the_title();
					$descriptions[$index] = get_the_excerpt();?>
			<?php endwhile; ?>
			<div id="main-wrapper" style="">
            
            
            
				<?php // output the boxes
				$desc = '';
				for($x=0;$x<=$index; $x++){
					 
						if($x+1==1 || ($x)%4 ==0){
							
							echo '<div id="service-row" class="team-row clearfix" style="margin:10px 0px;">';
							echo '</div>';
						}
						
                            
						echo '<div id="post-'.$id[$x].'" class="tg-services-col" style="width:24%; float:left; margin:10px 0px;">';
							echo '<div style="text-align:center;" class="team-image">';
								echo '<div class="bio-toggle bio-button post-'.$id[$x].'">';
									echo '<a style="color:#fff;" href="javascript:void(0)" class="bio-toggle services bio_inner post-'.$id[$x].'" id="'.$id[$x].'">Read more...</a>';
								echo '</div>';
							echo get_the_post_thumbnail( $id[$x], 'thumbnail', array( 'class' => 'services-thumb' ) );
							echo '</div>';
							echo $titles[$x];
						echo '</div>';
						
						
						$desc .= '<section id="post_'.$id[$x].'" class="bio post-'.$id[$x].' tab-content" > <strong>'.$titles[$x].'</strong></br>' . $descriptions[$x] . '<a href="javascript:void(0)" class="bio-toggle bio_close post-'.$id[$x].'"><i class="fa fa-times-circle" aria-hidden="true"></i>
</a></section>';
						if(($x> 1 && ($x+1)%4 == 0) || $x==$index){
							echo '<br style="clear:both;">';
							
							echo '<div id="desc-wrapper">' . $desc .'</div>';
							echo '</div>';
							
							$desc = '';
						}
					// close title wrapper
					
					
				}?>
			</div>
		
		<?php else: ?>
		
			<p>Sorry, no posts to list</p>

		<?php endif; ?>

Open in new window

SOLUTION

membership

This solution is only available to members.

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

Start Free Trial

Andrew Spackman

ASKER

This is what ive done is that correct?

<?php // get the number of posts
				if(!isset($wp_query)){
					global $wp_query;
				}
				$count =  $wp_query->post_count;
				$titles = NULL;
				$descriptions = NULL;
				$id = NULL;
				
			 ?>
			<?php while ( have_posts() ) : the_post(); ?>
				
				<?php // current post index
				
					$index = $wp_query->current_post; // add 1 for proper modulus
					$id = NULL;
					$titles[$index] = get_the_title();
					$descriptions[$index] = get_the_excerpt();
					echo '<br>index: ' . $index;
echo '<br>id @ index: ' . $id[$index];?>
			<?php endwhile; ?>
			<div id="main-wrapper" style="">

Open in new window

This is what im getting...

http://www.mabwealthmanagement.co.uk/service-category/services/

SOLUTION

membership

This solution is only available to members.

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

Start Free Trial

Andrew Spackman

ASKER

Thats a bit odd, I tried that but doesnt pull the ID?

http://www.mabwealthmanagement.co.uk/service-category/services/

get_the_id() inside the loop should get the post id value

for a sanity check in the output bloc just change it to x

echo '<div id="post-'.$x.'" class="tg-services-col" style="width:24%; float:left; margin:10px 0px;">'

Open in new window

lets get the process working, then figure out why the post id is screwed up

Andrew Spackman

ASKER

Ok so I have changed it and it seems to toggle nicely now, just need to figure out why the thumbnails are displaying correctly, here is my code

<?php if ( have_posts() ) : ?>
       

			<?php // get the number of posts
				if(!isset($wp_query)){
					global $wp_query;
				}
				$count =  $wp_query->post_count;
				$titles = NULL;
				$descriptions = NULL;
				$id = NULL;
				
			 ?>
			<?php while ( have_posts() ) : the_post(); ?>
				
				<?php // current post index
				
					$index = $wp_query->current_post; // add 1 for proper modulus
					$id[$index] = get_the_ID();
					$titles[$index] = get_the_title();
					$descriptions[$index] = get_the_excerpt();?>
			<?php endwhile; ?>
			<div id="main-wrapper" style="">
            
            
            
				<?php // output the boxes
				$desc = '';
				for($x=0;$x<=$index; $x++){
					 
						if($x+1==1 || ($x)%4 ==0){
							
							echo '<div id="service-row" class="team-row clearfix" style="margin:10px 0px;">';
							echo '</div>';
						}
						
                            
						echo '<div id="post-'.$x.'" class="tg-services-col" style="width:24%; float:left; margin:10px 0px;">';
							echo '<div style="text-align:center;" class="team-image">';
								echo '<div class="bio-toggle bio-button post-'.$x.'">';
									echo '<a style="color:#fff;" href="javascript:void(0)" class="bio-toggle services bio_inner post-'.$x.'" id="'.$x.'">Read more...</a>';
								echo '</div>';
							echo get_the_post_thumbnail( $id[$x], 'thumbnail', array( 'class' => 'services-thumb' ) );
							echo '</div>';
							echo $titles[$x];
						echo '</div>';
						
						
						$desc .= '<section id="post_'.$x.'" class="bio post-'.$x.' tab-content" > <strong>'.$titles[$x].'</strong></br>' . $descriptions[$x] . '<a href="javascript:void(0)" class="bio-toggle bio_close post-'.$id[$x].'"><i class="fa fa-times-circle" aria-hidden="true"></i>
</a></section>';
						if(($x> 1 && ($x+1)%4 == 0) || $x==$index){
							echo '<br style="clear:both;">';
							
							echo '<div id="desc-wrapper">' . $desc .'</div>';
							echo '</div>';
							
							$desc = '';
						}
					// close title wrapper
					
					
				}?>
			</div>
		
		<?php else: ?>
		
			<p>Sorry, no posts to list</p>

		<?php endif; ?>

Open in new window

I tried changing

echo get_the_post_thumbnail( $id[$x], 'thumbnail', array( 'class' => 'services-thumb' ) );

Open in new window

to...

echo get_the_post_thumbnail( $x, 'thumbnail', array( 'class' => 'services-thumb' ) );

Open in new window

But this kind of messed it up a bit

try adding this right after the get_the_ID() call

echo '<br>get id: ' .  get_the_ID();

Open in new window

my test page has the same code and it is echoing my post id values

maybe also try a dump

echo '<pre>';
var_dump($wp_query);
echo '</pre>';

Open in new window

Andrew Spackman

ASKER

Thats a bit odd, when I echo out the ID it displays the post ID correctly, so would it have something to do with this line?

echo get_the_post_thumbnail( $id[$x], 'thumbnail', array( 'class' => 'services-thumb' ) );

that's weird
so get_the_ID() is outputting the proper value but $id[$x] is null...and $titles[$x] has a value??

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

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

Start Free Trial

Andrew Spackman

ASKER

That's brilliant thank you, seemed to work fine, just need to get the close "x" toggle to close the description then I think I'm there

Andrew Spackman

ASKER

Do you have any idea why they won't close? when I toggle a.bio_close