I am trying to add a div class="row" after every four posts in my wordpress website. The following code is used to generate the post types on my page:
<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('showposts=8&post_type=branding'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<div class="col-md-3">
<div class="featured-project-image">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
else { echo'<img src="';
echo get_bloginfo( 'stylesheet_directory' );
echo'/images/placeholder.jpg"/>'; } ?>
</div>
</div>
<?php endwhile;?>
The following should do what you want
<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('showposts=8&post_type=branding' . '&paged=' . $paged);
?>
<div class="row">
<?php
$i = 0;
while ($wp_query->have_posts()):
$wp_query->the_post();
if ($i == 4) {
$i = 0;
?>
</div>
<div class="row">
<?php
}
?>
<div class="col-md-3">
<div class="featured-project-image">
<?php
if (has_post_thumbnail()) {
// check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
else {
echo '<img src="';
echo get_bloginfo('stylesheet_directory');
echo '/images/placeholder.jpg"/>';
} ?>
</div>
</div>
<?php
$i++;
endwhile; ?>
</div>
Starting the div before the while loop ensures the first 4 are also contained in a row.
Create variable, iterate it in each loop step and check if % 4 == 0;:
$i = 0;
while (...) {
echo $i % 4 == 0 ? 'row' : ''; // echo .row in first step too. If you want in the 4th step, just change the result of modulo operator
// your code here
$i++;
}
Related
I am working with WordPress and Advanced custom fields. I have created a for each loop and everything works just fine. But I don't want posts with "draft" status to be displayed this works as well, but if the array length of the posts is equal or greater then 4 posts I want to display a different HTML class "col-sm-6" but this doesn't work.
Basically, if posts are Published and array length is equal to 4 change class else do nothing. But for some reason, it's not working how it should be.
Can someone help me out?
My code:
<?php
$posts = get_field('home_add_news');
$counter = 0;
if($posts):
?>
<section id="news">
<div class="container">
<div class="row">
<?php
foreach( $posts as $post):
$post_date = get_the_date( 'd M Y' );
$post_img_url = get_the_post_thumbnail_url($post->ID, 'full');
$post_categories = get_the_category( $post->ID );
$post_category = $post_categories[0]->cat_name;
$post_class = '';
if(has_category('nieuws')):
$post_class = 'news__block--image';
elseif(has_category('project')):
$post_class = 'news__block--primary';
elseif(has_category('proces')):
$post_class = 'news__block--secondary';
elseif(has_category('tijdlijn')):
$post_class = 'news__block--tertiary';
else:
$post_class = 'news__block--tertiary';
endif;
if ('publish' === $post->post_status):
$counter++;
?>
<div class="col-custom <?php if ($counter >= 4): echo 'col-sm-6'; endif; ?>">
<article id="<?php echo get_the_ID(); ?>" class="news__block <?php echo $post_class; ?>" <?php if(!empty($post_img_url) && has_category('nieuws')): ?> style="background-image: url('<?php echo $post_img_url; ?>');" <?php endif; ?>>
<div class="news__container">
<header class="news__header">
<h3 class="news__pretitle"><?php echo $post_category; ?> <?php if(has_category('nieuws')): echo '- ' . $post_date; endif; ?></h3>
<h2 class="news__title"><?php echo $post->post_title; ?></h2>
<?php if($post->post_excerpt): ?>
<p class="news__message"><?php echo $post->post_excerpt; ?></p>
<?php endif; ?>
</header>
Lees meer
</div>
</article>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
</section>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
I assume you are trying to display the class col-sm-6 for posts greater than 4.
There are a few things, you could do to make it work.
Remove the code which increments $counter just after foreach loop. We would do this in step 2 below.
foreach( $posts as $post):
//$counter++; This should be commented.
We should instead increment this counter inside the if block where you are checking for the status.
if ('publish' === $post->post_status):
//echo $counter; //Comment this out
$counter++; //increment it here
?>
Last step is to make sure that when $counter is greater than or equal to 4 then display our class. As suggested by #Kaperto, you do not need to check for draft status here as you are already checking for the status above.
So take out the following line
<div class="col-custom <?php if ('draft' != $post->post_status && $counter == 4): echo 'col-sm-6'; endif; ?>">
and change it to
<div class="col-custom <?php if ($counter >= 4): echo 'col-sm-6'; endif; ?>">
The inner div boxes can have different heights but I need to be always above, like a vertical-align:top.
I now show this
But need always like this
Remeber, in tablet or mobile... responsive boostrap
The php code
<?php
$args = array( 'post_type' => 'clientes');
$loop = new WP_Query( $args );
$i=0;
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
if ($i%2==0){ $bgcolor='#f3f3f3'; } else { $bgcolor='#fff'; }
?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 partner" style="background-color: <?php echo $bgcolor; ?>">
<img src="<?php echo get_field('logotipo');?>" alt="<?php echo get_the_title();?>"/>
<?php if(get_field('proyectos')): ?>
<ul>
<?php while(has_sub_field('proyectos')): ?>
<li>
<p class="nameproject"><?php the_sub_field('nombre_proyecto'); ?></p>
<p><?php the_sub_field('tipologia_proyecto'); ?></p>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
</div>
<?php
$i++;
endwhile; endif;
?>
The only way I found to do this (without JavaScript) was to place the nth item in the (n % 3) column. You may need to change the order of posts.
// set defaults
$index = 0;
$post_cols = array('', '', '');
// start the loop
while (have_posts()) {
the_post();
//store posts in columns array
ob_start();
get_template_part('content', get_post_format());
$post_cols[$index % 3] .= ob_get_contents();
ob_end_clean();
$index++;
}// end while
//output column contents
echo '<div class="row">';
foreach ($post_cols as $col) {
echo '<div class="col-md-4 post-col">'.$col.'</div>';
}
echo '</div>';
You'll also need to make sure to remove the margin-left on the items in the first column.
.post-col:nth-child(3n+3) {
margin-left:0;
}
In your code you have defined col-xs-12 for mobile screens. If you want the layout to be same for all screen size then define col- xs with less column
if you are trying to create a pinterest style layout .please check out Salvattore & masonary
Also check this thread in stackoverflow . will come useful .
This is for a wordpress project but is more PHP really. I'm executing a query to bring back a max of 12 posts. Each set of three posts is wrapped in a div entitled jobsN. Each post (item) within that div comes back as item1, item2 and item3.
The item1 class works just fine but the jobs class doesn't come back as 1-2-3-4. It comes back as 1-0-0-0. I can't work out what is going wrong with my count.
As you can see from the HTML below, there is something off with the jobs count. This part is handled here:
<?php if ($count == 3) {?></div><?php $count = 0; ?><div class="jobs
<?php echo $count; ?>"><?php }; ?>
Here is the full query:
<?php
query_posts(array(
'post_type' => 'custom_job',
'showposts' => 12
) );
?>
<?php if ( have_posts() ): $contcount = 0; $count = 0;?>
<?php $contcount++; ?>
<div class="jobs<?php echo $contcount; ?>">
<?php while (have_posts()) : the_post(); $count++;?>
<div class="item-<?php echo $count ?>">
<h2><?php the_title(); ?></h2>
<p><?php echo get_the_excerpt(); ?></p>
Learn more -->
</div>
<?php if ($count == 3) {?></div><?php $count = 0; ?><div class="jobs<?php echo $count; ?>"><?php }; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
Here is the HTML I get back:
<div class="jobs1">
<div class="item-1">
content
</div>
<div class="item-2">
content
</div>
<div class="item-3">
content
</div>
</div>
<div class="jobs0">
<div class="item-1">
content
</div>
<div class="item-2">
content
</div>
<div class="item-3">
content
</div>
</div>
<div class="jobs0">
<div class="item-1">
content
</div>
<div class="item-2">
content
</div>
<div class="item-3">
content
</div>
</div>
<div class="jobs0">
<div class="item-1">
content
</div>
</div
This line is the problem:
<?php if ($count == 3) {?></div><?php $count = 0; ?><div class="jobs<?php echo $count; ?>"><?php }; ?>
If $count = 3 it means you will desplay a new jobs div but you also make $count = 0 then you are echoing it as 0.
Transform this line to:
<?php if ($count == 3) {?></div><?php $count = 0; $countcount++; ?><div class="jobs<?php echo $countcount; ?>"><?php }; ?>
use this line
<?php if ($count == 3) {?></div><?php $count = 0; $contcount++; ?><div class="jobs<?php echo $contcount; ?>"><?php }; ?>
instead of
<?php if ($count == 3) {?></div><?php $count = 0; ?><div class="jobs<?php echo $count; ?>"><?php }; ?>
Solution :
I have updated the $contcount++ when $count==3 and use in echo class jobs<?php echo $contcount
Try with this, not 100% sure it will work
<?php
query_posts(array(
'post_type' => 'custom_job',
'showposts' => 12
) );
?>
<?php if ( have_posts() ): $contcount = 0; $count = 0;?>
<?php $contcount++; ?>
<div class="jobs<?php echo $contcount; ?>">
<?php while (have_posts()) : the_post(); $count++;?>
<div class="item-<?php echo $count ?>">
<h2><?php the_title(); ?></h2>
<p><?php echo get_the_excerpt(); ?></p>
Learn more
</div>
<?php if ($count == 3): ?>
<?php $count = 0; $countcount++;?>
<div class="jobs<?php echo $contcount; ?>"></div>
<?php endif; ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
EDIT: Edited the possible error.
You're using the wrong counter in your PHP:
Your code has this line:
<?php if ($count == 3) {?></div><?php $count = 0; ?><div class="jobs<?php echo $count; ?>"><?php }; ?>
And it should be
<?php if ($count == 3) { ?></div><?php $count = 0; $contcount++; ?><div class="jobs<?php echo $contcount; ?>"><?php }; ?>
Because $count stores the item, and $contcount stores the block of items
So I'm using WordPress and created a variable $post_count to track the number of posts.
Right now I'm using if($post_count == 1) to add a class if it's the first post, which works fine, but I can't figure out how to get the last post.
Would that be possible using just a variable to count posts? Or is there a better way to do this than creating a count variable? Here's my code so far:
if($query->have_posts()): $post_count = 0; ?>
<div class="image-grid">
<?php while($query->have_posts()): $post_count++; $query->the_post(); ?>
<div class="item <?php if($post_count == 1) { ?>first_item<?php
} elseif() { ?>last item<?php } ?>">post content here</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
I believe you can do
$query->found_posts;
to get the total number of posts. So:
if($query->found_posts == $post_count)
should work.
<?php if($query->have_posts()): $post_count = 0; ?>
<div class="image-grid">
<?php while($query->have_posts()):
$post_count++;
$query->the_post();
?>
<div class="item <?php if($post_count == 1) { echo 'first_item'; } if( $query->found_posts == $post_count ) { echo 'last item'; } ?>">
<?php //post content here ?>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
I use a slider for my Wordpress featured articles. It selects a category and returns a custom amount of posts.
How do I make the first post that is displayed to be a custom one? Can I add an ID of a specific post directly in the slider code to make that post appear first, followed by the other ones that are returned by the original query?
For instance, on the page, the first post would be ID 6 (written in the source code manually) and the second, third and fourth posts are the ones returned by the query in the original code. How is this possible?
Someone suggested that this is very simple, all I need to do is to make another query before this to get the custom post, then close the query, reopen it to get the next query (that is in the slider code) and finally push the items into an array together. My very limited knowledge of PHP restricts me from understanding how to do this.
I know how to get a custom post, this code works:
<?php
$post_id = 6;
$queried_post = get_post($post_id);
?>
However, I do not know how I add this and the original query into an array. Do you?
Here is the full code for the slider:
<?php
$responsive = 'on' != get_option('henrik_responsive_layout') ? false : true;
$featured_auto_class = '';
if ( 'on' == get_option('henrik_slider_auto') ) $featured_auto_class .= ' et_slider_auto et_slider_speed_' . get_option('henrik_slider_autospeed');
?>
<div id="featured" class="<?php if ( $responsive ) echo 'flexslider' . $featured_auto_class; else echo 'et_cycle'; ?>">
<a id="left-arrow" href="#"><?php esc_html_e('Previous','henrik'); ?></a>
<a id="right-arrow" href="#"><?php esc_html_e('Next','henrik'); ?></a>
<?php if ( $responsive ) { ?>
<ul class="slides">
<?php } else { ?>
<div id="slides">
<?php } ?>
<?php global $ids;
$ids = array();
$arr = array();
$i=0;
$featured_cat = get_option('henrik_feat_cat');
$featured_num = (int) get_option('henrik_featured_num');
if (get_option('henrik_use_pages') == 'false') query_posts("showposts=$featured_num&cat=".get_cat_ID($featured_cat));
else {
global $pages_number;
if (get_option('henrik_feat_pages') <> '') $featured_num = count(get_option('henrik_feat_pages'));
else $featured_num = $pages_number;
query_posts(array
('post_type' => 'page',
'orderby' => 'menu_order',
'order' => 'ASC',
'post__in' => (array) get_option('henrik_feat_pages'),
'showposts' => (int) $featured_num
));
} ?>
<?php if (have_posts()) : while (have_posts()) : the_post();
global $post; ?>
<?php if ( $responsive ) { ?>
<li class="slide">
<?php } else { ?>
<div class="slide">
<?php } ?>
<?php
$width = $responsive ? 960 : 958;
$height = 340;
$small_width = 95;
$small_height = 54;
$titletext = get_the_title();
$thumbnail = get_thumbnail($width,$height,'',$titletext,$titletext,false,'Featured');
$arr[$i]['thumbnail'] = get_thumbnail($small_width,$small_height,'',$titletext,$titletext,false,'Small');
$arr[$i]['titletext'] = $titletext;
$thumb = $thumbnail["thumb"];
print_thumbnail($thumb, $thumbnail["use_timthumb"], $titletext, $width, $height, ''); ?>
<div class="featured-top-shadow"></div>
<div class="featured-bottom-shadow"></div>
<div class="featured-description">
<div class="feat_desc">
<p class="meta-info"><?php esc_html_e('Posted','henrik'); ?> <?php esc_html_e('by','henrik'); ?> <?php the_author_posts_link(); ?> <?php esc_html_e('on','henrik'); ?> <?php the_time(esc_attr(get_option('henrik_date_format'))) ?></p>
<h2 class="featured-title"><?php the_title(); ?></h2>
<p><?php truncate_post(410); ?></p>
</div>
<?php esc_html_e('Read More', 'henrik'); ?>
</div> <!-- end .description -->
<?php if ( $responsive ) { ?>
</li> <!-- end .slide -->
<?php } else { ?>
</div> <!-- end .slide -->
<?php } ?>
<?php $ids[] = $post->ID; $i++; endwhile; endif; wp_reset_query(); ?>
<?php if ( $responsive ) { ?>
</ul> <!-- end .slides -->
<?php } else { ?>
</div> <!-- end #slides -->
<?php } ?>
</div> <!-- end #featured -->
<div id="controllers" class="clearfix">
<ul>
<?php for ($i = 0; $i < $featured_num; $i++) { ?>
<li>
<div class="controller">
<a href="#"<?php if ( $i == 0 ) echo ' class="active"'; ?>>
<?php print_thumbnail( $arr[$i]['thumbnail']['thumb'], $arr[$i]['thumbnail']["use_timthumb"], $arr[$i]['titletext'], $small_width, $small_height ); ?>
<span class="overlay"></span>
</a>
</div>
</li>
<?php } ?>
</ul>
<div id="active_item"></div>
</div> <!-- end #controllers -->
If you choose to reply, please be detailed with code example, thank you.
line 39: replace that line with this one code below:
<?php if (have_posts()) : while (have_posts()) :
global $post;
if (!$first_time)
{
$post_id = 6;
$post = get_post($post_id);
$first_time = 1;
}
else the_post();
?>
Solution idea is simple:
Check for first-time loop
:firt loop - simply get needed post with "get_post()" function
:other loops - get posts from original query by "the_post()" function.