• Skip to main content

Julian Thomas Screawn

B.A. ,B.ED. ,M.ED.

  • Home
  • About
  • Projects
  • Resources
  • Reference
  • Contact

How to create a custom WordPress loop with variable columns, and pagination.

2021/04/16

function be_partners() { 

global $post;
global $wp_query;

	// arguments, adjust as needed
	$args = array(
		'post_type'      => 'partners',
		'posts_per_page' => 4,
		'post_status'    => 'publish',
		'paged'          => get_query_var( 'paged' )
	);


$query = new WP_Query($args); 
$rows = $query->posts;


$numOfCols = 2;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
$partners='<div class="container-fluid">';

$posts = $query->posts;


foreach($posts as $post) {
	
if($rowCount % $numOfCols == 0) {  
 $partners.='<div class="row">';  } 
 $rowCount++;  
 $partners.='<div class="col-md-'.$bootstrapColWidth.'">';
 
if(has_post_thumbnail( $post->ID ) ){
   $image_id = get_post_thumbnail_id();  		   
   $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); 
   $image_url=$image[0];
   $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);
}
else
{
$image_url="https://via.placeholder.com/400x400?text=400px by 400px";
$image_alt="dummy image";
}
	   
	   $partners.='<img class="img-fluid" src="'.$image_url.'" alt="'.$image_alt.'">';
	   
	   if($rowCount % 2 == 0){
	   $partners.='<div style="background:#e3785c;" class="post-title"><h3 style="color:white;margin-top: 2%;">'.$post->post_title.'</h3></div></div>';
	   }
	   else{
	   $partners.='<div style="background:#0c163f;" class="post-title"><h3 style="color:white;margin-top: 2%;">'.$post->post_title.'</h3></div></div>';
	   }
 
 
if($rowCount % $numOfCols == 0) {$partners.='</div>'; } 
    
}

$partners.='</div>'; //end container

//navigation

$partners.='<div style="background:#e4785c;color:white;padding:3% 0;" class="container-fluid text-center">'; //end container
$partners.='<div class="container">'; 
$partners.='<div class="row">'; 


 if ($query->max_num_pages > 1) { // check if the max number of pages is greater than 1  
 
 $partners.='<div class="col-lg-6 next-posts-link">';
 $next_link=get_previous_posts_link( 'View Newer Articles' );
 if(!empty($next_link)) $partners.='<i class="fas fa-backward"></i>&nbsp;&nbsp;';

 $partners.=get_previous_posts_link( 'View Newer Articles' ); // display newer posts link 
 
 $partners.='</div>';
 
 $partners.='<div class="col-lg-6 prev-posts-link">';
 $partners.=get_next_posts_link( 'View Older Articles', $query->max_num_pages ); // display older posts link 
 $partners.='&nbsp;&nbsp;<i class="fas fa-forward"></i>';
 $partners.='</div>';
 
 
 $partners.='</div>';
 }


$partners.='</div>'; //end row
$partners.='</div>'; //end container
$partners.='</div>'; //end container

wp_reset_postdata();  

return $partners;

}


add_shortcode('partners', 'be_partners'); ?>

Filed Under: Genesis Framework

Copyright © 2021 · Servicing Moncton, Dieppe, Riverview and beyond!