I'm using query_post to call all posts within a custom post type I have created called 'partners'.
What I would like so it to wrap the posts in a div in groups of 6's. For example:
<div class="item">
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
</div>
<!-- 6 images/posts wrapped -->
<div class="item">
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
</div>
<!-- 6 images/posts wrapped -->
This is my code so far:
<?php
query_posts('post_type=partners');
if (have_posts()) : while (have_posts()) ;
$posts = the_post();
if( $posts ): ?>
<? $lastIndex = count($posts) - 1; ?>
<? foreach($posts as $index => $post) : ?>
<? setup_postdata($post); ?>
<? if($index % 6 === 0) { ?>
<div class="item <?=$index === 0 ? 'active' : '' ?>">
<? } ?>
<div class="car-part-logo">
<? the_post_thumbnail('full', array('class' => 'img-responsive')); ?>
</div>
<? if(($index + 1) % 6 === 0 || $index === $lastIndex) { ?>
</div>
<? } ?>
<? endforeach; ?>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
However I get the following error: unexpected T_ENDWHILE
try this code
<?php
query_posts('post_type=partners');
while ( have_posts() ) : the_post();
//if (have_posts()) : while (have_posts()) ;
$posts = the_post();
if( $posts ): ?>
<? $lastIndex = count($posts) - 1; ?>
<? foreach($posts as $index => $post) : ?>
<? setup_postdata($post); ?>
<? if($index % 6 === 0) { ?>
<div class="item <?=$index === 0 ? 'active' : '' ?>">
<? } ?>
<div class="car-part-logo">
<? the_post_thumbnail('full', array('class' => 'img-responsive')); ?>
</div>
<? if(($index + 1) % 6 === 0 || $index === $lastIndex) { ?>
</div>
<? } ?>
<? endforeach; ?>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
I managed to rebuild the code based on this previous question. I altered my code to work with 6 items instead of 3.
<?php query_posts('post_type=partners'); ?>
<?php $variable=0;?>
<div class="item active">
<?php while ( have_posts() ) : the_post(); ?>
<?php if(($variable+1)<7){ ?>
<div class="car-part-logo">
<?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?>
</div>
<?php $variable+=1; ?>
<?php }else{ ?>
<?php $variable=1; ?>
</div>
<div class="item">
<div class="car-part-logo">
<?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?>
</div>
<?php }?>
<?php endwhile; ?>
</div>
<?php wp_reset_query(); ?>
Related
I'm trying to load all Wordpress posts into three different Divs as equal,
like this
<div class="row">
<div class="col-4">
POSTS HERE 1/3
</div>
<div class="col-4">
POSTS HERE 1/3
</div>
<div class="col-4">
POSTS HERE 1/3
</div>
</div>
I've already done something similar on other pages, but the difference is I'm only loading 6 posts there, so it's easier,
but now I wanna list all posts in the page into 3 columns,
this is the code I've used for 6 posts:
<?php
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>6)); ?>
<?php if ( $wpb_all_query->have_posts() ) : ?>
<?php query_posts('showposts=2'); ?>
<div class="col-sm-4">
<div class="article_list">
<?php $posts = get_posts('numberposts=2&offset=0'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count1 = 0; if ($count1 == "2") { break; } else { ?>
<article class="article_box">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<h3 class="journal_title"><?php the_title(); ?></h3>
</article>
<?php $count1++; } ?>
<?php endforeach; ?>
</div>
</div>
<?php query_posts('showposts=2'); ?>
<div class="col-sm-4">
<div class="article_list">
<?php $posts = get_posts('numberposts=2&offset=2'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count2 = 0; if ($count2 == "2") { break; } else { ?>
<article class="article_box">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<h3 class="journal_title"><?php the_title(); ?></h3>
</article>
<?php $count2++; } ?>
<?php endforeach; ?>
</div>
</div>
<?php query_posts('showposts=2'); ?>
<div class="col-sm-4">
<div class="article_list">
<?php $posts = get_posts('numberposts=2&offset=4'); foreach ($posts as $post) : start_wp(); ?>
<?php static $count3 = 0; if ($count3 == "2") { break; } else { ?>
<article class="article_box">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<h3 class="journal_title"><?php the_title(); ?></h3>
</article>
<?php $count3++; } ?>
<?php endforeach; ?>
</div>
</div>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
Try the below code. you will get post list in below format.
<?php
$loop_counter = $innerBreak = 1;
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>6));
if($wpb_all_query->have_posts()):
while($wpb_all_query->have_posts()) :
$wpb_all_query->the_post();
if($innerBreak == 1){
?>
<!-- when complete listing of 3 post open the new div -->
<div class="col-sm-4">
<?php
}
?>
<div class="article_list">
<article class="article_box">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<h3 class="journal_title"><?php the_title(); ?></h3>
</article>
</div>
<?php
//when complete listing of 3 post closed previously div.
if($loop_counter%3==0){ echo '</div>'; $innerBreak = 1;}else{$innerBreak = 0;}
$loop_counter++; endwhile;
else:
echo "<div>No Results Found</div>";
endif;
?>
Thanks to Shivendra Singh
after some small tweaks, here is the code to equally split all posts into three columns
<?php
$loop_counter = $innerBreak = 1;
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1));
if($wpb_all_query->have_posts()):
while($wpb_all_query->have_posts()) :
$wpb_all_query->the_post();
if($innerBreak == 1){
?>
<?php $posts_count = round((($wpb_all_query->post_count) / 3)+0.5); ?>
<!-- when complete listing of 3 post open the new div -->
<div class="col-sm-4">
<div class="article_list" data-parallax='{"y" : -150, "distance": 2000, "smoothness": 10}'>
<?php
}
?>
<article class="article_box">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<h3 class="journal_title"><?php the_title(); ?></h3>
</article>
<?php
//when complete listing of 3 post closed previously div.
if($loop_counter%$posts_count==0){ echo '</div></div>'; $innerBreak = 1;}else{$innerBreak = 0;}
$loop_counter++; endwhile;
else:
echo "<div>No Results Found</div>";
endif;
?>
In line $wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>6)); ?> you use 'posts_per_page'=>6.
Try to: 'posts_per_page'=>-1 it's load all posts.
Then try instead of your code:
<!-- If you use bootstrap -->
<div class="container">
<div class="row">
<?php
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>6)); ?>
<?php if ( $wpb_all_query->have_posts() ) : ?>
<?php while( $wpb_all_query->have_posts() ){ $wpb_all_query->the_post(); ?>
<div class="col-md-4">
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); // or the_content(); or any ?>
</div>
<?php } ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
</div>
I want Every Four Cfcolumns Wrapped in One Div Container having a Class
here is my While Loop in Index Page:
<div id="left-area" style="padding-top: 58px;">
<!-- #custom-area -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php endwhile; // end of the loop. ?>
<!-- #custom-area -->
</div> <!-- #left-area -->
I guess if you don't want to learn modulus - you can just reset your counter.
<div id="left-area" style="padding-top: 58px;">
<!-- #custom-area -->
<?php
//Initiate the counter
$counter = 0; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
//add 1 to the counter
$counter++;
//If the counter = 4, then spit out the HMTL
if($counter == 4): ?>
<div class="whateverClassWrapper">
<?php endif; ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>">
<img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php
//close the HTML tag initiated by your counter
if($counter == 4): ?>
</div>
<?php
//Reset the counter
$counter = 0;
endif; ?>
<?php endwhile; // end of the loop. ?>
<!-- #custom-area -->
</div> <!-- #left-area -->
This should work - but haven't tested it.
You can setup a counter to count the current loop, then check if its divisible by 4 to insert and close the container before and after your content.
<div id="left-area" style="padding-top: 58px;">
<?php $i = 1; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if( $i % 4 == 0 ): ?>
<div class="container">
<?php endif; ?>
<div class="cfcolumn">
<a href="<?php echo get_field('upload_pdf_book'); ?>"> <img src="<?php echo get_field('cover_picture'); ?>" alt="<?php
the_title(); ?>" >
</a>
</div>
<?php if( $i % 4 == 0 ): ?>
</div> <!-- close the container -->
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
</div>
You can also use the current_post property of $WP_Query, like so:
<?php
$args = array(
'post_type' => 'page',
'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) :
$loop->the_post();
if ($loop->current_post % 4 == 0) {
echo '<div class="container">';
echo '<div class="cfcolumn">';
//more code here
echo '</div>';
echo '</div>';
}
else {
echo '<div class="cfcolumn">';
//more code here
echo '</div>';
}
echo '</div>';
endwhile; wp_reset_postdata();
?>`
I need to have a different layout for the first post in every page, but don't know where to start. The code is the following:
<?php get_header(); ?>
<div class="row">
<section class="small-12 columns grid-style">
<?php $i = 0; $counter = range(0, 200, 3); ?>
<?php
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$args = array('offset'=> 0, 'paged'=>$paged);
$all_posts = new WP_Query($args);
if (have_posts()) : while($all_posts->have_posts()) : $all_posts->the_post();?>
<?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ?
<!--Post -->
<article class="grid-style post" id="post-<?php the_ID(); ?>"
<div class="post-img">
<?php get_template_part( 'inc/postformats/grid-style' ); ?>
</div>
<div class="post-box">
<div class="post-title">
<h2><?php echo ShortenText(get_the_title(), 50); ?></h2>
</div>
<aside class="post_categories">
<?php the_category(', '); ?>
</aside>
<div class="post-content">
<?php echo ShortenText(get_the_excerpt(), 170); ?>
</div>
</div>
</article>
<!--/Post -->
<?php if (in_array($i + 1, $counter)){ echo '</div>'; } ?>
<?php $i++; endwhile; ?>
<div class="small-12 columns">
<?php theme_pagination($all_posts->max_num_pages, 1, true); ?>
</div>
<?php else : ?>
<p><?php _e( 'Please add posts from your WordPress admin page.', THB_THEME_NAME ); ?></p>
<?php endif; ?>
</section>
</div>
<?php get_footer(); ?>
I need to use a different image size, so I need to output everything inside < ! - - Post - - > again for the first post only.
Are you trying to include div.row.journal to the first post?
If it's the case try doing this:
Replace <?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ? by the following: (It'll echo it only on the first page, for the first post)
<?php
if ($all_posts->current_post == 0 && !is_paged()) {
echo '<div class="row journal" data-equal=".post">';
}
?>
Doing the same for the closing div by replacing <?php if (in_array($i + 1, $counter)){ echo '</div>'; } ?> by :
<?php
if ($all_posts->current_post == 0 && !is_paged()) {
echo '</div>';
}
?>
You have to define a counter and ask with if...else... inside the loop
$post_counter = 1;
while (start_loop):
if ($post_counter == 1){
echo "<div id='1'></div>";
else:
echo "<div id='2'></div>";
$post_counter += 1;
//end loop
I think that should help you.
This is the code I have now, I was able to output the HTML for the first post, and a different one for ALL the posts, but I am getting 2 first posts. One using the first layout and the second using the second layout
<?php
/*
Template Name: Blog - Grid Style
*/
?>
<?php get_header(); ?>
<div class="row">
<section class="small-12 columns grid-style">
<?php $i = 0; $counter = range(0, 200, 3); ?>
<?php
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$args = array('offset'=> 0, 'paged'=>$paged);
$all_posts = new WP_Query($args);
$post_counter = 0;
if (have_posts()) : while($all_posts->have_posts()) : $all_posts->the_post(); $post_counter++;?>
<?php if ($i % 3 == 0) { echo '<div class="row journal" data-equal=".post">'; } ?>
<?php if ($post_counter == 1){ ?>
<!--Layout Post 1-->
<div class="row">
<article class="grid-style post small-9 small-centered column" id="post-<?php the_ID(); ?>">
<div class="post-img">
<?php get_template_part( 'inc/postformats/grid-style' ); ?>
</div>
<div class="post-box">
<div class="post-title">
<h2><?php echo ShortenText(get_the_title(), 50); ?>1</h2>
</div>
<aside class="post_categories">
<?php the_category(', '); ?>
</aside>
<div class="post-content">
<?php echo ShortenText(get_the_excerpt(), 170); ?>
</div>
</div>
</article>
</div>
<!--/Layout Post 1-->
<?php } ?>
<!--Other Posts -->
<div class="row">
<article class="grid-style post small-9 small-centered column" id="post-<?php the_ID(); ?>">
<div class="post-img">
<?php get_template_part( 'inc/postformats/grid-style' ); ?>
</div>
<div class="post-box">
<div class="post-title">
<h2><?php echo ShortenText(get_the_title(), 50); ?></h2>
</div>
<aside class="post_categories">
<?php the_category(', '); ?>
</aside>
<div class="post-content">
<?php echo ShortenText(get_the_excerpt(), 170); ?>
</div>
</div>
</article>
</div>
<!--/Other Posts -->
<?php if (in_array($i + 1, $counter)){ echo '</div>'; } ?>
<?php $i++; endwhile; ?>
<div class="small-12 columns">
<?php theme_pagination($all_posts->max_num_pages, 1, true); ?>
</div>
<?php else : ?>
<p><?php _e( 'Please add posts from your WordPress admin page.', THB_THEME_NAME ); ?></p>
<?php endif; ?>
</section>
</div>
<?php get_footer(); ?>
after adding the function of pagination to Functions.php and recall it in template-product-listing.php
there is nothing shown in result.
I have a big problom with this...
could you find and resolve the problem?
thnx
<article class="row">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="single-head" class="sixteen columns">
<h1><?php the_title(); ?></h1>
<?php if (has_excerpt()) { the_excerpt(); } ?>
</div>
<div class="row">
<nav id="portfolio-filters" class="sixteen columns">
<?php _e('Show All', 'ci_theme'); ?>
<?php
$args = array(
'hide_empty' => 0
);
$skills = get_terms('product-category', $args);
?>
<?php foreach ( $skills as $skill ) : ?>
<?php echo $skill->name; ?>
<?php endforeach; ?>
</nav><!-- /portfolio-filters -->
</div>
<div id="portfolio-items" class="row">
<?php $ci_product_query = new WP_Query('post_type=product&posts_per_page=4'); ?>
<?php if ( $ci_product_query-> have_posts() ) : while ( $ci_product_query->have_posts() ) : $ci_product_query->the_post(); ?>
<?php $item_skills = wp_get_object_terms($post->ID, 'product-category'); ?>
<article class="<?php ci_e_setting('product_columns'); ?> columns <?php foreach ( $item_skills as $item_skill ) : echo $item_skill->slug.' '; endforeach; ?> columns portfolio-item">
<a href="<?php echo get_permalink(); ?>" title="<?php echo esc_attr(get_the_title()); ?>" class="fb">
<?php the_post_thumbnail('ci_portfolio_slider', array('class'=>'scale-with-grid')); ?>
</a>
<div class="portfolio-desc">
<h3><?php the_title(); ?></h3>
<p class="desc"><?php echo mb_substr(get_the_excerpt(), 0, 70); ?>...</p>
</div>
</article><!-- /portfolio-item -->
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
</div><!-- /portfolio-items -->
<?php get_template_part('part', 'call_to_action'); ?>
<?php endwhile; endif; ?>
<div class="pagination">
<?php wp_pagination(); ?>
</div>
</article>
if your sure there is a post_type called products and there is posts in it...
try:
<div id="portfolio-items" class="row">
<?php $ci_product_query = new WP_Query(array('post_type'=>'product', 'posts_per_page'=> 4); ?>
<?php if ( $ci_product_query-> have_posts() ) : while ( $ci_product_query->have_posts() ) : $ci_product_query->the_post(); ?>
You know you are starting a new wp_query for every post in have_posts() ? you might want to rethink what you are trying to achieve!
I'm trying to achieve a 3x3 grid view of all the WordPress posts on the "blog" page (index.php). I'm building the site based on Bootstrap 3.
Therefore the loop has to create the columns and rows with PHP.
I'd like to have it set up in rows, so that potential height differences are being reset every row. The bootstrap grid would look like this:
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
<div class="row">
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
<div class="col-sm-4">content</div>
</div>
Lacking the PHP skills for setting up the loop properly, I tried hacking my way around, coming up with 3 times this (modifying the offsets):
<?php query_posts('posts_per_page=1&offset=0'); while (have_posts()) : the_post(); ?>
<div class="row">
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile; ?>
<?php query_posts('posts_per_page=1&offset=1'); while (have_posts()) : the_post(); ?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile; ?>
<?php query_posts('posts_per_page=1&offset=2'); while (have_posts()) : the_post(); ?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
</div>
<?php endwhile; ?>
It has obvious disadvantages:
a lot of unnecessary PHP requests/loops
filtering by categories, tags, etc doesn't work
Could you help me out with creating the PHP loop?
The most related question I found is this, but the column layout is somehow skewed!
Thanks a lot! Philipp
The easiest would be to use one container and put all the contetn items in it, then equal their height via js like that.
PHP
<?php query_posts('posts_per_page=9');while (have_posts()) : the_post();?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php endwhile?>
JS:
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.each(function() { $(this).height(tallest); });
}
$(document).ready(function() {
equalHeight($(".thumb"));
});
If thats no option, you could do sth. like that:
PHP
<div class="row">
<?php
$count=0;
query_posts('posts_per_page=9');
while (have_posts()) : the_post();
?>
<div class="col-sm-4 blog-post thumb">
<?php get_template_part('templates/content', get_post_format()); ?>
</div>
<?php
$count++;
if($count == 3 || $count == 6 ) echo '</div><div class="row">';
endwhile;
?>
</div>
Every three post objects must be contained within a row. So it will be like <div class="row"> <!-- post - post - post -> </div> <div class="row"> <!-- post - post - post -> </div>
If you would like to do this in php, and still maintain proper 'rowage' your code could look something like this:`
<div class="container">
<?php
$countturtle = 0 ;
$countbang = 0 ;
$count_posts = wp_count_posts( 'portobello' )->publish;
$args = array( 'post_type' => 'portobello', 'posts_per_page' => 32 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php $countbang++ ?>
<?php if ( $countbang >= 2 ) {
$countturtle = $countturtle + 1 ; } ?>
<?php if ( $countbang == 1 ) {
echo '<div class="row first-training">'; } elseif ( ( $countturtle % 3 ) == 0 ) {
echo '<div class="row">'; } ; ?>
<div id="post-<?php the_ID(); ?>" class="training-block <?php echo $countbang; ?>-block-training col-sm-4" >
<header class="entry-header training-header">
<h1 class="entry-title train">
<?php the_title(); ?>
</h1>
</header><!-- .entry-header -->
<div class="entry-imogin">
ddd
</div><!-- .entry-imogin -->
</div><!-- #post -->
<?php if ( $countbang % 3 == 0 ) {
echo '</div>'; }
elseif ( $countposts == $countbang ) { echo '</div>';} ; ?>
<?php endwhile; ?>
</div>
Here a solution for 3 columns
layout :
1 | 2 | 3
4 | 5 | 6
7 | 8 | 9
...
<div class="row">
<div class="col-sm-4">
<?php $i = 1 ?>
<?php $posts = get_posts(array(
'post_type' => 'news',
'posts_per_page' => -1
));
foreach ($posts as $post) : start_wp(); ?>
<?php if ($i == 1): ?>
<h2><?php the_title(); ?></h2>
<?php endif; ?>
<?php if($i == 3){$i = 1;} else {$i++;} ?>
<?php endforeach; ?>
</div>
<div class="col-sm-4">
<?php $i = 1 ?>
<?php $posts = get_posts(array(
'post_type' => 'news',
'posts_per_page' => -1
));
foreach ($posts as $post) : start_wp(); ?>
<?php if ($i == 2): ?>
<h2><?php the_title(); ?></h2>
<?php endif; ?>
<?php if($i == 3){$i = 1;} else {$i++;} ?>
<?php endforeach; ?>
</div>
<div class="col-sm-4">
<?php $i = 1 ?>
<?php $posts = get_posts(array(
'post_type' => 'news',
'posts_per_page' => -1
));
foreach ($posts as $post) : start_wp(); ?>
<?php if ($i == 3): ?>
<h2><?php the_title(); ?></h2>
<?php endif; ?>
<?php if($i == 3){$i = 1;} else {$i++;} ?>
<?php endforeach; ?>
</div>
</div>