I'm using Bootstrap, I have a list of posts and I want to wrap every 2 posts on a row. Each post is wrapped on a <div col>. You can see live here.
I tried with this but it wrap the row each one post:
<?php
$num = 0;
// Check if there are any posts to display
if ( have_posts() ) : ?>
<?php
// The Loop
while ( have_posts() ) : the_post();
if($num%2) {
echo "<div class='row' style='margin-bottom: 2.3em;''>";
}
?>
<div class="col-xs-12 col-sm-6 col-md-6">
<h2 class="category-encabezado">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace a <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<small>Hace
<?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ''; ?>
</small>
<div class="entry">
<p>
<?php the_excerpt(); ?>
</p>
<?php
$my_shortcode = get_field('audio-field');
echo do_shortcode( $my_shortcode );
?>
</div>
</div>
<?php
if($num %2) {
echo '</div>';
}
$num++
?>
<?php endwhile; // End Loop
?>
</div>
<?php
You have to put div.row Out of the Loop while
Related
I created a custom grid to have this display :
Now i need to add an id (with an incremental number) to every row so i can use it as anchor. I tried to regroup every three blocs in one div but i couldn't do it.
<?php
if ( $query->have_posts() ) {
while ( $query->have_posts() ) : $query->the_post(); ?>
<?php if ($i % 3 == 0) { ?>
<div class="projet-bloc-empty col-md-4"><div></div></div>
<div class="projet-bloc-empty col-md-4"><div></div></div>
<div class="projet-bloc-empty col-md-4"><div></div></div>
<?php } ?>
<div class="projet-bloc col-md-4">
<a href="<?php echo $post->post_name ?>" title="<?php echo $post->post_title ?>">
<?php echo get_the_post_thumbnail($post->ID); ?>
</a>
</div>
<?php $i++; endwhile; ?>
<?php } ?>
I am relatively new to php.
I have a loop in place for my Wordpress posts page - The posts have to alternate between left and right alignments.
I have this working by assigning an even or odd class to each post, however now the latest post does not display on the posts page.
For example, if I have say 5 posts; 4 of the posts will display and the latest post will remain hidden until I make a new post - the previously hidden post will then join the others and the new "latest post" will remain hidden.
I can't figure out why my loop is skipping over the first post, I have already tried adding rewind_posts(); however this created an infinite loop of the same post.
Any help is much appreciated!
<?php
$postcount=1;
while(have_posts()) :
if( ($postcount % 2) == 0 ) $post_class = ' even';
else $post_class = ' odd';
?>
<div class="row">
<div id="stories-box-alt" class="stories-column-circle-main"
style="background-color:transparent;">
<div id="circle-shape" class="post <?php echo $post_class; ?>">
<?php the_post(); ?>
<img src="<?php the_field('post_preview_image'); ?>" class="curve">
<h2><?php the_title(); ?></h2>
<h3><span class="featured-title"><?php the_field('post_category'); ?> .
</span></h3>
<p><?php the_field('post_preview'); ?><br><a href="<?php the_permalink();
?>">read more...</a></p>
</div>
</div>
</div>
<?php $postcount++;
endwhile; ?>
<?php
$postcount=1;
while(have_posts()) :
?>
<div class="row">
<div id="stories-box-alt" class="stories-column-circle-main"
style="background-color:transparent;">
<div id="circle-shape" class="post <?php if(($postcount % 2) == 0){ ?> even <?php } else{ echo " odd"; }?>">
<?php the_post(); ?>
<img src="<?php the_field('post_preview_image'); ?>" class="curve">
<h2><?php the_title(); ?></h2>
<h3><span class="featured-title"><?php the_field('post_category'); ?> .
</span></h3>
<p><?php the_field('post_preview'); ?><br><a href="<?php the_permalink();
?>">read more...</a></p>
</div>
</div>
</div>
<?php $postcount++;
endwhile; ?>
OR
<?php echo $postcount % 2 == 0 ? ' even ': ' odd '; ?>
Please try to use the_post() first.
<?php
$postcount=1;
while(have_posts()) :
the_post();
if( ($postcount % 2) == 0 ) $post_class = ' even';
else $post_class = ' odd';
?>
<div class="row">
<div id="stories-box-alt" class="stories-column-circle-main"
style="background-color:transparent;">
<div id="circle-shape" class="post <?php echo $post_class; ?>">
<img src="<?php the_field('post_preview_image'); ?>" class="curve">
<h2><?php the_title(); ?></h2>
<h3><span class="featured-title"><?php the_field('post_category'); ?> .
</span></h3>
<p><?php the_field('post_preview'); ?><br><a href="<?php the_permalink();
?>">read more...</a></p>
</div>
</div>
</div>
<?php $postcount++;
endwhile; ?>
Basically there is a basic loop in wordpress to make what you want to do : https://wpchannel.com/wordpress/tutoriels-wordpress/afficher-articles-recents-site-wordpress/
You can modify this one with your own properties but this is usually loop used.
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 want to add every 3 posts in my index.php file in a row div but I would like to exclude the first post so that I can style the first post differently.
I currently have the loop working for every 3 posts but I would like to exclude the first post and style the first post differently to make it a featured post
below is my code
<div class="content post-main__content clearfix" id="post-<?php the_ID(); ?>" >
<?php
if(have_posts()) : for($count=0;have_posts();$count++) : the_post();
$open = !($count%3) ? '<div class="post-main__row clearfix">' : ''; //Create open wrapper if count is divisible by 3
$close = !($count%3) && $count ? '</div>' : ''; //Close the previous wrapper if count is divisible by 3 and greater than 0
echo $close.$open;
?>
<div class="post-main__cell">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
<div class="post-main__cell-top">
<?php the_post_thumbnail(array(330, 167,)); ?>
<h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
</h3>
</div>
<div class="post-main__cell-bottom">
<h2 class="archive-header"><?php the_title() ?></h2>
<p class="paragraph--time"><?php posted_on(); ?></p>
</div>
</a>
</div>
<?php endfor; else : ?>
<?php echo $count ? '</div>' : ''; //Close the last wrapper if post count is greater than 0 ?>
There is a great answer here for creating a loop that separates out the first post from the rest: https://wordpress.stackexchange.com/questions/101096/how-to-show-one-post-different-from-the-rest
Then I'd use a grid framework or some simple css to style the remaining containers, personally I love getskeleton.com but this part is up to you using the blog loop template.
I worked it like this
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('posts_per_page' => 12, 'paged' => $paged );
query_posts($args); ?>
<?php if (have_posts()) : ?>
<?php $postcount = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $postcount++; ?>
<?php if ($postcount == 1 && $paged == 1) : // if this is the first post & first page ?>
<div class="post-main__row clearfix">
<div class="post-main__cell post-main__cell-large">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
<div class="post-main__cell-left clearfix">
<?php the_post_thumbnail(array(691, 317,)); ?>
<h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
</h3>
</div>
<div class="post-main__cell-right">
<h2 class="archive-header"><?php the_title() ?></h2>
<p class="paragraph--time"><?php the_time('l, F jS, Y') ?></p>
</div>
</a>
</div>
</div>
<?php
if(have_posts()) : for($count=0;have_posts();$count++) : the_post();
$open = !($count%3) ? '<div class="post-main__row clearfix">' : ''; //Create open wrapper if count is divisible by 3
$close = !($count%3) && $count ? '</div>' : ''; //Close the previous wrapper if count is divisible by 3 and greater than 0
echo $close.$open;
?>
<div class="post-main__cell">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to go to <?php the_title(); ?>">
<div class="post-main__cell-top">
<?php the_post_thumbnail(array(330, 167,)); ?>
<h3 class="content__category-name <?php foreach((get_the_category()) as $category) { echo $category->cat_name. ''; } ?>">
<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>
</h3>
</div>
<div class="post-main__cell-bottom">
<h2 class="archive-header"><?php the_title() ?></h2>
<p class="paragraph--time"><?php the_time('l, F jS, Y') ?></p>
</div>
</a>
</div>
<?php endfor; else : ?>
<?php endif; ?>
<?php echo $count ? '</div>' : ''; //Close the last wrapper if post count is greater than 0 ?>
<?php endif; ?>
<?php endwhile; ?>
I am building a wordpress page (based on quark, using ACF) showing info from other posts using foreach(get_field('exhibitions') as $post_object)
I want the 'col grid_3_of_12-divs' containing info from other posts to group up in divs, with four in each div. A similar problem as the author of this question had: Is there an easy way to do 4 at a time in a php foreach loop
I have tried with array_chunk, but can't seem to make it without messing with the retrieving of info from the other posts.
Can someone help me with this?
I am a self taught php beginner, so please excuse me if my code is stupid..
<?php get_header(); ?>
<div id="primary" class="site-content row clearfix" role="main">
<div class="col grid_12_of_12">
<?php while ( have_posts() ) : the_post(); ?>
<?php foreach(get_field('exhibitions') as $post_object): ?>
<a href="<?php echo get_permalink($post_object->ID); ?>">
<div class="col grid_3_of_12">
<h3 class="exhibition title"> <?php echo $post_object->short_title?> </h3>
<?php $attachment_id = $post_object->thumbnail;
$image_attributes = wp_get_attachment_image_src( $attachment_id, 'full' ); ?>
<img src="<?php echo $image_attributes[0]; ?>">
<p class="exhibition short desc"> <?php echo $post_object->short_description?> </p>
</div>
</a>
<?php endforeach; ?>
<?php content_nav( 'nav-below' ); ?>
<?php endwhile; ?>
</div>
</div>
Add a counter. Then when the counter is at the right spot, add a close or open div.
<?php get_header(); ?>
<div id="primary" class="site-content row clearfix" role="main">
<div class="col grid_12_of_12">
<?php while ( have_posts() ) : the_post(); ?>
<?php $counter = 0; /* ADD THIS */ ?>
<?php foreach(get_field('exhibitions') as $post_object): ?>
<?php if ($counter % 4 == 0): /* ADD THIS */ ?>
<div class="group-of-4-posts-wrapper">
<?php endif; ?>
<a href="<?php echo get_permalink($post_object->ID); ?>">
<div class="col grid_3_of_12">
<h3 class="exhibition title"> <?php echo $post_object->short_title?> </h3>
<?php $attachment_id = $post_object->thumbnail;
$image_attributes = wp_get_attachment_image_src( $attachment_id, 'full' ); ?>
<img src="<?php echo $image_attributes[0]; ?>">
<p class="exhibition short desc"> <?php echo $post_object->short_description?> </p>
</div>
</a>
<?php if ($counter % 4 == 3): /* ADD THIS */ ?>
</div>
<?php endif; ?>
<?php $counter++ ?>
<?php endforeach; ?>
<?php
// this closes the div if there is not a number of posts that is evenly
// divisable by 4, like 11 posts. with 11 posts, the last post would have
// ($counter % 4 == 3) equal to false, because $counter % 4 would = 2
// adding this, closes the div, if it was not already closed
if ($counter % 4 != 0): /* ADD THIS. */
?>
</div>
<?php endif; ?>
<?php content_nav( 'nav-below' ); ?>
<?php endwhile; ?>
</div>
</div>