Conditional styling for post containers in The Loop - php

My loop displays posts in two columns using this:
<?php
if (have_posts()): while (have_posts()) : the_post();
$count++;
?>
<?php if ($count == 1) : ?>
<div class="home-ci-row">
<div style="padding: 0px;" class="main-column-item-wrap">
CONTENT OF POST : Title, Thumbnail, Excerpt... etc
</div>
<div class="home-ci-gap"></div><!-- /* the gap */ -->
<?php elseif ($count == 2) : ?>
<div style="padding: 0px;" class="main-column-item-wrap">
CONTENT OF POST : Title, Thumbnail, Excerpt... etc
</div> <!-- main-column-item-wrap -->
</div><!-- /* home-ci-row*/ -->
<?php $count = 0; ?>
<?php else : ?>
// No posts
<?php endif; endwhile; endif; ?>
You can see that the <div class="home-ci-row"> opens in the first count & closes in the second one </div>
so when my loop has an even number of posts works great, but with odd number it doesn't close the div
so My idea is this: If loop has even number
If loop has odd number of posts

By the way, you can do something like:
<?php
$count=0;
while(have_posts()){
if($count%2==0){
echo '<div class="home-ci-row">';
//draw your left div here
}else if($count%2==1){
//draw your gap here
//draw your right div here
echo '</div>';
}
$count++;
}
//close div if count is an odd number
if($count%2==1) echo '</div>';
?>

Is it possible to swap to a for loop? Is this what you need?
for ($i = 0; $i < $numberOfElements; $i++)
{
//if (odd number) && (this is the last element)
if (($i % 0 == 1) && ($i == $numberOfElements - 1))
{
//Special Case
}
else
{
//Normal Case
}
}
Caveat: Watch out for errors, PHP isn't my strongest language

This question was answered on WP Development StackExchange by fischi
Quoting from his answer:
You could do this much easier. As you are making a layout that can be achieved by floats, there is no need to declare a Row every second time.
In my Code example I just youse the $count to determine the Class of the HTML-Element. In combination with the total Number of Posts displayed.
If the total number of posts $wp_query->post_count is reached by the $count AND the total number is odd, I give the Element the Class fullwidth. In the same way, I determine if it is the first or the second (see the IF-Statement).
All I need to do afterwards is output the corresponding Class for each HTML-Element in the Loop. Besides the Class, no Element is diffferent from each other.
I use the Modulo Operator in PHP ( % ) to determine odd/even. It delivers 1 if I use $count % 2 and $count is odd. If you are not sure about this operator, read about it here.
So your code could look like this:
<?php
$count = 0;
if (have_posts()): while (have_posts()) : the_post();
if ( ++$count == $wp_query->post_count && ( $wp_query->post_count % 2 ) == 1 ) {
// if final count is reached AND final count is odd
// full width item
$postclass = "fullwidth";
$opentag = '';
$closingtag = '</div>';
} else if ( ( $count % 2 ) == 1 ) {
// if $count is odd it is the first item in a 'row'
$postclass = "halfwidth first";
$opentag = '<div class="home-ci-row">';
$closingtag = '';
} else {
// second item in a row
$postclass = "halfwidth second";
$opentag = '';
$closingtag = '</div>';
}
?>
<?php echo $opentag; ?>
<div class="main-column-item-wrap <?php echo $postclass; ?>">
CONTENT OF POST : Title, Thumbnail, Excerpt... etc
</div><!-- main-column-item-wrap -->
<?php echo $closingtag; ?>
<?php endwhile; endif; ?>

Related

PHP Even and ODD items in one of two columns, put first item in even column

My count loop currently works but it is not working correctly. I need every second item to go into the right column and the rest stay in the left. So 1, 3, 5 etc in the column called split-left and 2, 4, 6 to go into the column called split-right
<!-- SPLIT EFFECT PAGE BUILDER -->
<div class="page-builder">
<?php if( have_rows('split_effect_page_builder') ): ?>
<div class="split-left">
<?php $i = 1; ?>
<?php while ( have_rows('split_effect_page_builder') ) : the_row(); ?>
<?php get_template_part('template-parts/page', 'builder'); ?>
<?php
if($i % 2 == 0){
echo '</div><div class="split-right">';
$i = 0;
}
$i++;
?>
<?php endwhile; ?>
</div>
<?php else : ?>
<?php // no layouts found ?>
<?php endif; ?>
</div>
<!-- END SPLIT EFFECT PAGE BUILDER -->
Seems you just need to reset your counter whenever it reaches 2..
<?php
if($i == 2){
echo '</div><div class="split-right">';
$i =0; // set back to zero...
}
$i++; // and now it's 1 again so next iteration would be left aligned
?>
PS.. not sure why you close a PHP tag only to immediately re-open it.. That won't break anything, but probably a good habit to get rid of.

Implementing a PHP counter inside of a while loop to wrap list items with ul elements

I am having difficulty implementing a PHP counter, to wrap my list elements in unordered list tags.
I want to wrap around every 3 list elements.
I have been trying to use these previous questions as a guide but to little avail.
easier way to get counter from while loop?
php loop counter bootstrap row
<?php
$counter = 0;
echo '<ul class="products latestCourses">';
while ( have_posts() ) : the_post(); ?>
<?php wc_get_template_part( 'content', 'product' ); ?>
<?php $counter = $counter++; ?>
<?php if ($counter%3 == 0) echo '</ul><ul class="products latestCourses">'; ?>
<?php endwhile; // end of the loop. ?>
This is what I have so far the page template simply contains a list element.
Currently this code is wrapping every list item in an unorder list.
<?php $counter = $counter++; ?>
this line is wrong, use either
<?php $counter++; ?>
or
<?php $counter = $counter +1; ?>
Use this for increment by 1
$counter = $counter + 1;
or
$counter = $counter + n;
where 'n' is the desired number by which you want to increment

How to count total number of posts in a loop and create different outputs if total number is even or odd (WP)

So I've been looking for a solution to this for a while to no avail. There's a lot of information out there about creating a different output for even numbered posts vs odd numbered posts, but I need something differently.
Basically I have dynamically loaded posts added to a page. They are all 50% of the container with a float: left CSS rule. So if the total number of posts is even it looks great, if it's odd, there's an awkward empty space after the last post loaded to the page.
I'd like to create a rule that states if total number of post is even, apply this mark-up, if is odd, apply alternate mark up. Then I can take the last child of mark up and force the width to 100% instead of 50%.
Here's my loop:
<?php $the_query = new WP_Query();
$x = 0;
while ( $the_query->have_posts() ) :
$the_query->the_post(); ?>
<article>
Some Content
</article>
<?php endwhile;
$x++;
wp_reset_query(); ?>
CSS:
article { width: 50%; float: left; }
What I want is:
<?php if ($post_count = even) : ?>
<article>
Some Content
</article>
<?php elseif ($post_count = odd) : ?>
<article class="alt">
Some Content
</article>
<?php endif; ?>
CSS:
article { width: 50%; float: left; }
article.alt:last-child { width: 100%; }
Is anyone familiar with how this can be achieved? As always, any help is greatly appreciated!
cheers,
the modulus (%) operator can be used here
if (($x % 2) == 1)
{
echo "odd";
}
if (($x % 2) == 0)
{
echo "even";
}
See: php test if number is odd or even
You can try this :
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish;
if($published_posts % 2 == 0)
{
// even
}
else
{
//odd
}
If you want to know whether respective post is even or odd...please refer to below :
<?php $postnum = 0;?>
if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $postnum++;
$alt = ( $postnum % 2 ) ? ' even_post' : ' odd_post';
?>

Wrap outputs of a Wordpress query every second item

I think I am pretty close to the solution but I cannot figure out the logic for where I should close the last div.
I have a wordpress query which requests four posts.
I want to wrap every two items in <section class="sponsor-row">
So I have implemented a counter in my query that counts each post, and if it finds two posts have been output it closes the <section> div off.
But I cannot work out how I should work out if the row should be closed again.
Can anyone figure this out? How can I make it wrap every two outputs in <section class="sponsor-row"> ?
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$counter = 0;
echo '<section class="sponsor-row">'; // Opening the section here
if ( has_post_thumbnail() ) {
$counter++;
echo '<div class="grid half">';
echo '<a class="sponsor" href="'.get_the_permalink().'" target="_blank">';
the_post_thumbnail( 'full' );
echo '</a>';
echo '</div>';
if ($counter <= 2){
echo '</section>'; // closing the section if two posts
$counter = 0;
}
}
}
}
Full query here: http://pastebin.com/e6RzZLR5
if you do if ($counter <= 2){ then it will close it each time it is less or equal 2, which means it will close it twice for each item. You should use if ($counter == 2){ and $counter = 0; should be at the top before the query, otherwise you will set it to 0 each loop.
See comparison in php

Define variable - use in WP loop

I'm trying to output a WP loop with a (class name) variable which changes depending on which iteration it is, as defined in this regex.
$mod = 0;
$rows = 0;
for ($i = 0; $i < 10; ++$i) {
$output = " ";
if ($rows % 2 == 1) {
$output = "flip";
}
// Build the post - includes the variable $output
get_template_part( 'partials/loop', 'main' );
if (++$mod % 2 == 0) {
$mod = 0;
++$rows;
}
}
But this doesn't work; instead outputting many duplicates of the same posts with no output.
I'm clearly doing something wrong; maybe approaching the problem in the wrong way.
Tip: The expression tests for every other pair such as 11 - 00 - 11 - 00
The loop, showing desired variable position:
<div class="post small-12 medium-6 columns <?php echo $output; ?>" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>">
<h2 class="blog-title">
<?php the_title(); ?></h2>
</a>
</div> <!-- ends post -->
You can't pass a variable to your template via get_template_part(). You need to instead include your template with:
include( locate_template( 'partials/loop-main.php' ) );
// or whatever your template name is...
However, this also highly depends on where you loop is (since you haven't shown it).
For more information, see this answer on WPSE.
So in your case, you'd have something like:
<?php if ( have_posts() ): ?>
<?php // Your initial iterator/counter logic goes here... ?>
<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php
// Test your counter to see if you need to add a class on this post
// include() the template, rather than get_template_part() so that we can pass the
// counter to the partial template.
include( locate_template( 'partials/loop-main.php' ) );
// Increment the counter
?>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>

Categories