I have two loop with orderby random(all work good), but I want to show same post for each loop,
example: I have post 1 to 10;
loop 1 show post 1 2 and 3;
loop 2 need to show same post 1 2 and 3, my code is:
<div class="col-md-12" data-wow-delay="0.2s">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<?php
$args = array(
'post_type' => 'testimonials',
'orderby' => 'rand',
'posts_per_page' => 3 );
$loop = new WP_Query( $args );
$i = 0;
while ( $loop->have_posts() ) : $loop->the_post();
$avatar_testimonials = get_field('avatar-testimonials');
?>
<li data-target="#quote-carousel" data-slide-to="<?php echo $i; ?>" class="<?php if ($i == 0) echo 'active'; ?>"><img class="img-responsive" alt="<?php echo the_title(); ?>" src="<?php if ($avatar_testimonials) {echo $avatar_testimonials['url'];} else {the_post_thumbnail_url('thumbnail');} ?>" alt=""></li>
<?php $i++; endwhile; ?>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner text-center">
<?php
$args = array(
'post_type' => 'testimonials',
'orderby' => 'rand',
'posts_per_page' => 3 );
$loop = new WP_Query( $args );
$i = 0;
while ( $loop->have_posts() ) : $loop->the_post();
?>
<!-- Quote 1 -->
<div class="item <?php if ($i == 0) echo 'active'; ?>">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<?php echo the_excerpt(); ?>
<small><?php echo the_title(); ?></small>
</div>
</div>
</blockquote>
</div>
<?php $i++; endwhile; wp_reset_postdata(); ?>
</div>
</div>
</div>
Try this, I think it will work for you.
<div class="col-md-12" data-wow-delay="0.2s">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<?php
$args = array(
'post_type' => 'testimonials',
'orderby' => 'rand',
'posts_per_page' => 3 );
$loop = new WP_Query( $args );
$i = 0;
while ( $loop->have_posts() ) : $loop->the_post();
$avatar_testimonials = get_field('avatar-testimonials');
?>
<li data-target="#quote-carousel" data-slide-to="<?php echo $i; ?>" class="<?php if ($i == 0) echo 'active'; ?>"><img class="img-responsive" alt="<?php echo the_title(); ?>" src="<?php if ($avatar_testimonials) {echo $avatar_testimonials['url'];} else {the_post_thumbnail_url('thumbnail');} ?>" alt=""></li>
<?php $i++; endwhile; ?>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner text-center">
<?php
$i = 0;
while ( $loop->have_posts() ) : $loop->the_post();
?>
<!-- Quote 1 -->
<div class="item <?php if ($i == 0) echo 'active'; ?>">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<?php echo the_excerpt(); ?>
<small><?php echo the_title(); ?></small>
</div>
</div>
</blockquote>
</div>
<?php $i++; endwhile; wp_reset_postdata(); ?>
</div>
</div>
</div>
Related
I created a custom template for the homepage. I want to call the content after the portfolio, but it doesn't work. I can't find where I made a mistake. It works when I call above the portfolio. Anyone know how I could accomplish this?
<section id="portfolio" class="portfolio atop">
<!-- Portfolio Filter -->
<div class="portfolio_filter">
<ul>
<?php $categories = get_categories("taxonomy=categories");
foreach ($categories as $category) : echo '<li><a data-filter=".' . $category->slug . '" href="#">' . $category->name . '</a></li>';
endforeach; ?>
<li><a class="select-cat" data-filter="*" href="#">All Works</a></li>
</ul>
</div>
<div class="container">
<div class="row masonry clearfix">
<!-- a work -->
<?php $args = array(
'post_type' => 'portfolio',
'orderby' => 'date',
'order' => 'ASC',
'posts_per_page' => 100,
);
$wp_query = new WP_Query($args);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<?php $portcolor = get_field('text_color_of_featured_image'); ?>
<?php $taxonomy = 'categories';
$terms = get_the_terms($post->ID, 'categories'); ?>
<?php foreach ($terms as $term) ?>
<a href="<?php echo esc_html(get_permalink()); ?>" class="col-xl-4 col-md-6 grid-item <?php echo esc_html($term->slug); ?> <?php echo esc_attr($portcolor); ?>" data-type="ajax-load">
<figure class="portfolio-item <?php $portfolio_type = get_field('portfolio_type');
echo esc_attr($portfolio_type); ?>">
<div class="image">
<?php $featured_image = get_field('portfolio_featured_image'); ?>
<img src="<?php echo esc_url($featured_image['url']); ?>" alt="<?php echo esc_attr($featured_image['alt']); ?>" />
</div>
<figcaption>
<span><?php echo esc_html($term->name); ?></span>
<h3 class="title"><?php the_title(); ?></h3>
</figcaption>
</figure>
</a>
<?php endwhile; ?>
</div>
</div> <!-- container end -->
</section>
<?php the_content(); ?>
You need to reset the global post after your custom WP_Query with wp_reset_postdata(). See below:
<section id="portfolio" class="portfolio atop">
<!-- Portfolio Filter -->
<div class="portfolio_filter">
<ul>
<?php $categories = get_categories("taxonomy=categories");
foreach ($categories as $category) : echo '<li><a data-filter=".' . $category->slug . '" href="#">' . $category->name . '</a></li>';
endforeach; ?>
<li><a class="select-cat" data-filter="*" href="#">All Works</a></li>
</ul>
</div>
<div class="container">
<div class="row masonry clearfix">
<!-- a work -->
<?php $args = array(
'post_type' => 'portfolio',
'orderby' => 'date',
'order' => 'ASC',
'posts_per_page' => 100,
);
$wp_query = new WP_Query($args);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<?php $portcolor = get_field('text_color_of_featured_image'); ?>
<?php $taxonomy = 'categories';
$terms = get_the_terms($post->ID, 'categories'); ?>
<?php foreach ($terms as $term) ?>
<a href="<?php echo esc_html(get_permalink()); ?>" class="col-xl-4 col-md-6 grid-item <?php echo esc_html($term->slug); ?> <?php echo esc_attr($portcolor); ?>" data-type="ajax-load">
<figure class="portfolio-item <?php $portfolio_type = get_field('portfolio_type');
echo esc_attr($portfolio_type); ?>">
<div class="image">
<?php $featured_image = get_field('portfolio_featured_image'); ?>
<img src="<?php echo esc_url($featured_image['url']); ?>" alt="<?php echo esc_attr($featured_image['alt']); ?>" />
</div>
<figcaption>
<span><?php echo esc_html($term->name); ?></span>
<h3 class="title"><?php the_title(); ?></h3>
</figcaption>
</figure>
</a>
<?php endwhile;
// reset global post data
wp_reset_postdata();?>
</div>
</div> <!-- container end -->
</section>
<?php the_content(); ?>
I'm embarrassed because i'm working on a slider in order to display recent posts. I'm using for that the Carousel Bootstrap, here is my code :
<?php
$lastposts = get_posts( array(
'posts_per_page' => 3,
'category' => 584
) );
if ( $lastposts ) { ?>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php foreach ( $lastposts as $post ) :
setup_postdata( $post ); ?>
<div class="carousel-item active">
<img src="/wp-content/uploads/slider.png">
<div class="carousel-caption d-none d-md-block">
<div class="title">
<?php the_title(); ?>
</div>
</div>
</div>
<?php
endforeach;
wp_reset_postdata();
}
?>
</div>
</div>
The issue is that all my items are "active".
How can i solve that ? To put only the first item as active.
Try it with a counter variable:
<?php
$lastposts = get_posts( array(
'posts_per_page' => 3,
'category' => 584
) );
if ( $lastposts ) { ?>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php $counter = 1; ?>
<?php foreach ( $lastposts as $post ) :
setup_postdata( $post ); ?>
<div class="carousel-item <?php echo ($counter==1) ? "active" : ""; ?>">
<img src="/wp-content/uploads/slider.png">
<div class="carousel-caption d-none d-md-block">
<div class="title">
<?php the_title(); ?>
</div>
</div>
</div>
<?php
$counter++;
endforeach;
wp_reset_postdata();
}
?>
</div>
</div>
i need to create something like this picture
Picture
How to put three posts in each Wordpress loop? with different classes?
Within each loop, put three posts.
PHP
$args = array(
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 12,
'ignore_sticky_posts' => false,
'no_found_rows' => false,
'paged' => 1
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) { ?>
<div class="owl-carousel">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="row">
<div class="col-md-6">
<?php the_post_thumbnail( 've' ); ?> <!-- Vertical Image Size : 300*600 px (width/height) -->
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<?php the_post_thumbnail( 'ho' ); ?> <!-- Horizontal Image Size : 600*300 px (width/height) -->
</div>
<div class="col-md-12">
<?php the_post_thumbnail( 'ho' ); ?> <!-- Horizontal Image Size : 600*300 px (width/height) -->
</div>
</div>
</div>
</div>
<?php
endwhile;
?> </div> <!-- / .owl-carousel --> <?php
}
I am using OWL Carousel and i Need to put three posts in each Slide,
HTML
<div class="owl-carousel">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="row">
<div class="col-md-6">
<img src="Vertical" alt="">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<img src="Horizontal" alt="">
</div>
<div class="col-md-12">
<img src="Horizontal" alt="">
</div>
</div>
</div>
</div>
<?php endwhile; ?>
any Suggestion, any Ideas
Thanks a lot!
I would use a counting variable and use that with some if statements to determine output:
$args = array(
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 12,
'ignore_sticky_posts' => false,
'no_found_rows' => false,
'paged' => 1
);
$the_query = new WP_Query( $args );
$i = 1;
if ( $the_query->have_posts() ) { ?>
<div class="owl-carousel">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="post-<?php if ($i > 1) {echo "right";} else { echo "left"; } ?>">
<?php the_post_thumbnail(); ?>
</div>
<?php $i++; ?>
<?php endwhile;?>
</div>
<?php endif; ?>
I think you don't put three post in each lopp but you simply manage them with counter:
$args = array(
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 12,
'ignore_sticky_posts' => false,
'no_found_rows' => false,
'paged' => 1
);
$the_query = new WP_Query( $args );
$cont = 0;
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) : $the_query->the_post();
$supp = $cont % 3;
switch($supp)
{
case 0: $vert = get_the_post_thumbnail_url(); break;
case 1: $oriz1 = get_the_post_thumbnail_url(); break;
case 2: $oriz2 = get_the_post_thumbnail_url(); break;
}
$cont ++;
endwhile;
}
After you print html
<div class="row">
<div class="col-md-6">
<img src="<?php echo $vert; ?>" alt="">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<img src="<?php echo $oriz1; ?>" alt="">
</div>
<div class="col-md-12">
<img src="<?php echo $oriz2; ?>" alt="">
</div>
</div>
</div>
</div>
First sort all posts by image type in another array like this:
<?php
$counter = 0;
$index = 0;
$all_posts = array();
while ( $the_query->have_posts() ) {
$the_query->the_post();
if ($counter != 3) {
$all_posts[$index][] = get_the_post_thumbnail_url();
$counter ++;
} else {
$index ++;
$counter = $index;
$all_posts[$index][] = get_the_post_thumbnail_url();
}
}
After this, You can foreach new array and set images by size
<?php foreach ($all_posts as $key => $current_posts): ?>
<div class="row">
<div class="col-md-6">
<img src="<?php $current_posts[$key][0]; ?>" alt="">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<img src="<?php $current_posts[$key][1]; ?>" alt="">
</div>
<div class="col-md-12">
<img src="<?php $current_posts[$key][2]; ?>" alt="">
</div>
</div>
</div>
</div>
I'm trying to get 2 different styled posts to show up one after the other and then back around. So it should look like
DB
Uncategorized
DB
Uncategorized
etc
And to have them both styled differently. I'm not great with PHP and the best I got so far was all in one category and then all in the other.
<section class="home-middle">
<div class="container">
<div class="row">
<div class="col-sm-8">
<?php
$args = array('category_name' => 'designer backstage',
'post_status' => 'publish',
'posts_per_page' => '3' );
$category_posts = new WP_Query($args);
if($category_posts->have_posts()) :
while($category_posts->have_posts()) :
$category_posts->the_post();
?>
<div class="stylists-book">
<div class="image">
<div class="meta-designer">
<div class="pro-pic"><img src="images/stylists-pro1.jpg"></div>
<h3>Designer<hr></h3>
<p><?php the_author(); ?></p>
<span><?php the_date(); ?></span>
</div>
<img><?php the_post_thumbnail(); ?>
</div>
<?php
$args = array('category_name' => 'uncategorized',
'post_status' => 'publish',
'posts_per_page' => '3');
$category_posts = new WP_Query($args);
if($category_posts->have_posts()) :
while($category_posts->have_posts()) :
$category_posts->the_post();
?>
<div class="look" style="max-height: 200px">
<div class="row">
<div class="col-md-4">
<div class="team-modster">
<span><?php the_author(); ?></span>
<?php the_title(); ?>
</div>
</div>
<div class="col-md-8">
<a href="<?php the_permalink() ?>">
<img style="height:200px" src="<?php echo catch_that_image() ?>" />
</a>
</div>
</div>
</div>
<?php endwhile; else: >
Oops, there are no posts.
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
</div>
</div>
</section>
A co-worker took a look at it and got it working. Figured I would post the solution.
<?php
$args = array('category_name' => 'designer-backstage',
'post_status' => 'publish',
'posts_per_page' => '5' );
$designer_posts = new WP_Query($args);
$args = array('category_name' => 'uncategorized',
'post_status' => 'publish',
'posts_per_page' => '5' );
$uncategorized_posts = new WP_Query($args);
if ($designer_posts->have_posts() && $uncategorized_posts->have_posts()) :
// If a new category is added, add it to this array
$category_posts = [$designer_posts, $uncategorized_posts];
$cat_posts_idx = 0;
$new_category_posts = [];
$post_count = 0;
$max_posts = 10;
// Alternate categories and store into a new posts array
while ($post_count < $max_posts) {
// Iterate the post
$category_posts[$cat_posts_idx]->the_post();
// get_the_category() returns an array with one item in this case
$category = get_the_category()[0];
if ($category->slug == 'designer-backstage') { ?>
<div class="stylists-book">
<div class="image">
<div class="meta-designer">
<div class="pro-pic"><img src="images/stylists-pro1.jpg"></div>
<h3>Designer<hr></h3>
<p><?php the_author(); ?></p>
<span><?php the_date(); ?></span>
</div>
<img><?php the_post_thumbnail(); ?>
</div>
<?php }
else if ($category->slug == 'uncategorized') { ?>
<div class="look">
<div class="row">
<div class="col-md-4">
<div class="team-m">
<span><?php the_author(); ?></span>
<?php the_title(); ?>
</div>
</div>
<div class="col-md-8" style="max-height: 225px; overflow: hidden;"><img style="" src="<?php echo catch_that_image() ?>" /></div>
</div>
</div>
</div>
<?php }
else:
?>
Oops, there are no posts.
<?php
endif;
?>
I am trying to build a content slider so that each slide contains 8 images. To do this I need to add the 'row-fluid' class to every 4 posts and 'slide' class to every 8 posts in my WP query.
HTML of what I am try to achieve -
<div class="coda-slider" id="slider-id">
<div class="slide">
<div class="row-fluid">
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
</div><!-- /row-fluid -->
<div class="row-fluid">
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
</div><!-- /row-fluid -->
</div><!-- /slide -->
<div class="slide">
<div class="row-fluid">
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
</div><!-- /row-fluid -->
<div class="row-fluid">
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
<div class="span3">
<img src="...">
</div>
</div><!-- /row-fluid -->
</div><!-- /slide -->
</div><!-- /coda-slider -->
My query that doesn't work correctly -
<?php
$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);
$the_query = new WP_Query( $args );
echo '<section id="our-clients">';
echo '<div class="coda-slider" id="slider-id">';
$i = 1;
echo '<div class="slide">';
echo '<div class="row-fluid">';
if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
echo '<div class="span3">';
the_post_thumbnail();
echo '</div>';
if($i % 8 == 0) {echo '</div><div class="slide">';}
elseif($i % 4 == 0) {echo '</div><div class="row-fluid">';}
$i++; endwhile; endif;
echo '</div>'; //row-fluid
echo '</div>'; //slide
echo '</div>'; //coda-slider
echo '</section>';
What the query is printing out -
The php is adding the 'slide' class to every 8 posts but the first 'slide' class isn't closing correctly. This probably sounds really confusing, so let me know if you need additional information.
I appreciate the help!
Try this ;)
<?php
$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);
$the_query = new WP_Query( $args );
echo '<section id="our-clients">';
echo '<div class="coda-slider" id="slider-id">';
for($i=1; $the_query->have_posts(); $i++)
{
$the_query->the_post();
$prePost='';
$postPost='';
if($i==1)
{
$prePost='<div class="slide"><div class="row-fluid">';
}
if($i==4)
{
$prePost='</div><div class="row-fluid">';
}
if($i==8)
{
$postPost='</div></div>';
$i=0;
}
echo $prePost, '<div class="span3">';
the_post_thumbnail();
echo '</div>', $postPost;
}
echo '</div>'; //coda-slider
echo '</section>';
This code is from another answer on SO
How do I add a class to every nth item in a php loop (wordpress)
https://stackoverflow.com/a/12698408/804087
<?php $counter = 1 ?>
<?php $loop = new WP_Query( array( 'post_type' => 'portfolio' ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="four columns <?php if ($counter % 4 == 1){echo 'alpha'}else if ($counter % 4 == 0){echo 'omega'} ?>">
<?php the_content(); //along with other stuff in looped div ?>
</div>
<?php $counter++ ;
endwhile ?>
You may try this using get_posts and array_chunck
$args = array( 'post_type' => 'video', 'posts_per_page' => 10,);
$posts = get_posts($args);
$postGroups = array_chunk($posts, 8);
foreach($postGroups as $group) :
echo "<div class='slide'>";
$slides = array_chunk($group, 4);
foreach($slides as $fluides) :
echo "<div class='row-fluide'>";
foreach($fluides as $video) : setup_postdata($video)
<div class="span3">
// ...
</div>
endforeach;
echo "</div>";
endforeach;
echo "</div>";
endforeach;