Wordpress loop - First posts different wrap - php

I want to show 5 posts, first one is bigger and has a other class around itself.
I've found a few other posts which are basically the same, but none of them shows how to 'wrap' the first post and 'wrap' all the other posts together.
I've made an example with html/css how it should look.
Hope someone can help me with this. :)
<?php
$args = array(
'post_type' => 'services',
'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) :
$loop->the_post();
if ($loop->current_post == 0) {
echo '<div class="col-md-6">';
the_post_thumbnail();
the_title();
echo '</div>';
}
else {
echo '<div class="col-md-6">';
the_post_thumbnail();
the_title();
echo '</div>';
}
endwhile; wp_reset_postdata(); ?>
.col-md-6 {
width: 50%;
padding: 0 !important;
float: left;
}
img {
width: 100%;
height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="col-md-6">
<img src="http://placehold.it/100x100" alt="">
</div>
<div class="col-md-6">
<div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
<div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
<div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
<div class="col-md-6"><img src="http://placehold.it/100x100" alt=""></div>
</div>
</section>

<?php
$args = array(
'post_type' => 'services',
'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) :
$loop->the_post();
echo '<div class="some-div">';
if ($loop->current_post == 0) {
echo '<div class="col-md-6">';
the_post_thumbnail();
the_title();
echo '</div>';
echo '</div>'; // close .some-div
echo '<div class="other-div">';
}
else {
echo '<div class="col-md-6">';
the_post_thumbnail();
the_title();
echo '</div>';
}
echo '</div>'; // close .other-div
endwhile; wp_reset_postdata(); ?>

I've fixed this the way I want.
Here's the code I've uesd if someone's looking for something like this.
<section class="no-gutter">
<?php
$args = array(
'post_type' => 'services',
'posts_per_page' => 5
);
$loop = new WP_Query($args);
while ($loop->have_posts()) :
$loop->the_post(); ?>
<?php if ($loop->current_post == 0) : ?>
<!-- large -->
<div class="col-md-6 large">
<a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
<div class="wrapper">
<?php the_post_thumbnail(); ?>
<span><?php the_title(); ?></span>
</div>
</a>
</div><!-- end large -->
<!-- small -->
<div class="col-md-6">
<?php else : ?>
<div class="col-md-6">
<a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
<div class="wrapper">
<?php the_post_thumbnail(); ?>
<span><?php the_title(); ?></span>
</div>
</a>
</div>
<?php endif; ?>
<?php endwhile; wp_reset_postdata(); ?>
</div><!-- end small -->

Related

Wordpress the_content() not showing after the portfolio section

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(); ?>

2 WP_Querys repeating one after the other - Styled Differently

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;
?>

WordPress Loop, add class to second object

I have the following code:
<?php
$args = array(
'category__in' => array(3),
'posts_per_page' => 3
);
$loop = new WP_Query( $args );
while ($loop->have_posts() ) : $loop->the_post();
?>
<div class="col-md-4 col-sm-4 col-xs-12" style="padding-left:0; padding-right:0;">
<a style="text-decoration:none" href="<?php echo get_permalink(); ?>">
<div class="postsize" style="background:#242930; color:white !important;">
<?php echo get_the_post_thumbnail( $page->ID, 'categoryimage', array('class' => 'faqposts')); ?>
<div class="contentfaq" style="padding: 0 20px 20px; min-height:235px;">
<h3 style="color:white !important;"><?php the_title(); ?></h3>
<div style="color:white";>
<p><?php echo content2(15); ?></p>
</div>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
Which gets my latest posts, and displays them in blocks.
Now, I am trying to make the second block background white, but can not target it, well I am unsure on how to.
Is there a quick way to target this?
Create a variable and check if you're in second step in loop.
$i = 1;
while ($loop->have_posts() ) : $loop->the_post();
?>
<div class="col-md-4 col-sm-4 col-xs-12" style="padding-left:0; padding-right:0;">
<a style="text-decoration:none; color:white;" href="<?php echo get_permalink(); ?>">
<div class="postsize" style="<?php echo $i == 2 ? 'background: white; color: black;' : 'background: #242930; color: #fff !important'; ?>">...
...
<?php
$i++;
endwhile;
?>

Pagination on my custom blog page template Wordpress

I have create a custom blog page template but the problem is that i am not able to insert pagination links yet i want to display pagination links next and previous on the bottom of blogs what should i do....
here is my code
<?php /*
Template Name: My Blog Page
*/
?>
<div class="col-md-9 col-sm-9">
<!-- Blog Post -->
<?php
$args = array('post_type' => 'post', 'posts_per_page' => 10, 'ignore_sticky_posts' => 1, 'category_name' => 'blog', );
$post_type_data = new WP_Query($args);
while ($post_type_data->have_posts()):
$post_type_data->the_post();
global $more;
$more = 0; ?>
<div class="row blog-row" style="padding: 20px 0;border- bottom: 1px solid #A9A9A9;">
<div style="width: 50%;float: left">
<div class="feature-image img-overlay">
<?php if (has_post_thumbnail()): ?>
<?php $default = array('class' => 'img-responsive');
the_post_thumbnail('wl_blog_img', $default); ?>
<?php endif; ?>
</div>
</div>
<div class="feature-content" style="padding-left: 15px;display: inline-block;width: 50%">
<h3 class="h3-blog-title">
<?php echo the_title(); ?>
</h3>
<span style="padding-right: 5px"><i class="icon-picture"></i></span>
<span style="padding-right: 5px"><i class="icon-time"></i><?php echo get_the_date('j'); ?> <?php echo the_time('M'); ?>, <?php echo the_time('Y'); ?></span>
<span style="padding-right: 5px"><i class="icon-user"></i><?php echo get_the_author(); ?></span><br><br>
<?php the_excerpt(); ?>
<a class="my-btn" href="<?php echo the_permalink(); ?>">Read More</a>
</div>
<div class="feature-details1">
</div>
</div>
<?php endwhile; ?>
<!-- //Blog Post// -->
</div>
Use following code for pagination
<?php /*
Template Name: My Blog Page
*/
?><div class="col-md-9 col-sm-9">
<!-- Blog Post -->
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('post_type' => 'post', 'posts_per_page' => 2, 'ignore_sticky_posts' => 1, 'category_name' => 'blog', 'paged' => $paged );
$post_type_data = new WP_Query($args);
set_query_var('page',$paged);
while ($post_type_data->have_posts()):
$post_type_data->the_post();
global $more;
$more = 0; ?>
<div class="row blog-row" style="padding: 20px 0;border- bottom: 1px solid #A9A9A9;">
<div style="width: 50%;float: left">
<div class="feature-image img-overlay">
<?php if (has_post_thumbnail()): ?>
<?php $default = array('class' => 'img-responsive');
the_post_thumbnail('wl_blog_img', $default); ?>
<?php endif; ?>
</div>
</div>
<div class="feature-content" style="padding-left: 15px;display: inline-block;width: 50%">
<h3 class="h3-blog-title">
<?php echo the_title(); ?>
</h3>
<span style="padding-right: 5px"><i class="icon-picture"></i></span>
<span style="padding-right: 5px"><i class="icon-time"></i><?php echo get_the_date('j'); ?> <?php echo the_time('M'); ?>, <?php echo the_time('Y'); ?></span>
<span style="padding-right: 5px"><i class="icon-user"></i><?php echo get_the_author(); ?></span><br><br>
<?php the_excerpt(); ?>
<a class="my-btn" href="<?php echo the_permalink(); ?>">Read More</a>
</div>
<div class="feature-details1">
</div>
</div>
<?php endwhile; ?>
<div class="nav-previous alignleft"><?php previous_posts_link('« Newer posts');?></div>
<div class="nav-next alignright"><?php next_posts_link( 'Older posts »', $post_type_data->max_num_pages ); ?></div>
<!-- //Blog Post// -->
</div>

Add class to every 4 posts and 8 posts -- WordPress Loop

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;

Categories