PHP Wrapping custom items inside loop Wordpress - php

I am currently creating a slider which consists of products.
Currently I have managed to wrap every 2 items in div using this code:
<div class="frame crazy" id="crazy">
<div class="slidee">
<?php if ( $myposts->have_posts() ) :
$i = 0;
while ( $myposts->have_posts() ) : $myposts->the_post();
$image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_id() ), 'single-post-thumbnail' );
$value = get_field( "alternate_image", get_the_id() );
$titl = get_field( "title", get_the_id() );
$big = get_field( "big_section", get_the_id() );
if ( $i % 2 == 0) : ?>
<div class="op" <?if ($big==1){?>style="width:850px !important;"<?}?>>
<?php endif;
$_pf = new WC_Product_Variable(get_the_id());
$variations = $_pf->get_available_variations();
$vrt = count($variations);
?>
<div data-hv="<?php echo $value; ?>" data-titleContent="<a href='<?php echo get_the_permalink();?>'><?php echo get_the_title(); ?></a>" data-tipso-content="<span class='varaition'>this item has <?php echo $vrt; ?> variation(s)</span><a class='bty' href='<?php echo get_the_permalink(); ?>'>details</a>" data-url="<? echo the_permalink(); ?>" class="cola <?php if($big==1){?>big<?}?>" style="background-image: url('<?php echo $image[0]; ?>')" data-mg="<?php echo $image[0];?>">
<?php if($titl==1) { ?>
<h2><a href='<?php echo get_the_permalink();?>'><?php echo get_the_title(); ?></a></h2>
<p class="slu"><a href='<?php echo get_the_permalink();?>'>shop now ></a> </p>
<?php } ?>
</div>
<?php if ( $i % 2 != 0 ) : ?>
</div>
<?php endif; ?>
<?php $i++; endwhile; ?>
<?php if ( $i % 2 != 0 ) : ?>
</div>
<?php endif; ?>
<?php endif;?>
</div>
</div>
This code wraps every two products like this:
<div class="op">
<div class="product1">
//content
</div>
<div class="product2">
//content
</div>
</div>
<div class="op">
<div class="product3">
//content
</div>
<div class="product4">
//content
</div>
</div>
But I need to fetch custom number of posts according to product meta. So that the number of products can be varying like this:
<div class="op">
<div class="product1">
//content
</div>
<div class="product1">
//content
</div>
<div class="product1">
//content
</div>
<div class="product1">
//content
</div>
<div class="op">
<div class="product1">
//content
</div>
<div class="product1">
//content
</div>
</div>
Is it possible using product meta or any better idea?

this line in your code:
if ( $i % 2 == 0) : ?>
contains the loop number, change that to be a variable and set that variable from the meta data, so:
$loopmeta=metadata_retriever();
if ( $i % $loopmeta == 0 ) : ?>
You will have to write the metadata_retriever() function and put some error checking around the retrieval of the $loopmeta variable to ensure it comes back as a valid integer (not 0, nor 12.735 for instance :-) )

Related

Add dynamic id to custom row

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

Wrap every 2 posts on a row

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

php template code - all properties page display issue

My page: http://kevinkang.ca/en_US/all-properties/ was broken yesterday.
But I can't find any problem on these. Can anyone help me to find out the problem?
<div class="grid-x all-properties-page">
<?php
$args = array( 'category__not_in' => array( 4, 8, 9, 10 ) , 'posts_per_page' => -1 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php $i=0; ?>
<div class="medium-12 cell padding-top-page">
<div class="home-data description-title-price">
<div class="grid-container">
<div class="grid-x">
<div class="medium-6 cell">
<?php the_title(); ?>
</div>
<div class="medium-6 cell text-right">
<?php the_field('price'); ?>
</div>
</div>
</div>
</div>
<a href="<?php the_permalink(); ?>"><div class="grid-x">
<ul class="images3">
<?php
//Get the images ids from the post_metadata
$images = acf_photo_gallery('3-images', $post->ID);
$img3=0;
if( count($images) ):
//Cool, we got some data so now let's loop over it
foreach($images as $image):
$id = $image['id']; // The attachment id of the media
$title = $image['title']; //The title
$caption= $image['caption']; //The caption
$full_image_url= $image['full_image_url']; //Full size image url
$full_image_url = acf_photo_gallery_resize_image($full_image_url, 1562, 760); //Resized size to 262px width by 160px height image url
$thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
$url= $image['url']; //Goto any link when clicked
$target= $image['target']; //Open normal or new tab
$alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
$class = get_field('photo_gallery_class', $id);
$img3++;
?>
<?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
<li style="background-image: url(<?php echo $full_image_url; ?>);" class="img-list<?php echo $img3; ?>">
<?php if( !empty($url) ){ ?></a><?php } ?></li>
<?php endforeach; endif; ?>
</ul>
<?php foreach ( get_the_category() as $value) {
$i++; ?> <h3 class="cat<?php echo $i; ?> <?php echo $value->name; ?>"><?php echo $value->name;} ?></h3>
</div></a>
<div class="grid-container pr-address-bg">
<div class="address-cont price-address">
<?php the_field('price'); ?>
<?php the_field('address_first_line'); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
I see you have a lot of problems in your HTML ( inside , multiple tags. First check your HTML with https://validator.w3.org/. It looks the main parts of the problems come from header.php. I would have a look.

I want every four elements in WP While Loop wrapped in a Div Container (Index.php) Wordpress

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

Wordpress Timeline Show post Monthly

I am fetching data through custom post type and category. I have added 12 category Jan to Dec and Jan has 1 posts Feb have 2 post
What I am struggling to do on January post the 2 circle is showing on the left I want only one January Circle rest of the January post under the circle.
Can you please how can i put check on category?
here is the site http://novartis.portlandvault.com/timeline/
Thanks
<div id="timeline">
<?php
//Define your custom post type name in the arguments
$args = array('post_type' => 'timeline', 'order' => 'asc' );
//Define the loop based on arguments
$loop = new WP_Query( $args );
//Display the contents
while ( $loop->have_posts() ) : $loop->the_post();
$thumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'large') );
$category = get_the_terms($id, 'timeline_categories');
?>
<div class="timeline-item">
<div class="timeline-icon">
<div class="timeline-month">
<?php echo $category[0]->name;?>
</div>
</div>
<div class="timeline-content right">
<h2>
<?php the_title(); ?>
</h2>
<p>
<?php echo the_content(); ?>
</p>
<div class="timeline_img">
<img src="<?php echo $thumb; ?>" class="img-responsive">
</div>
</div>
</div>
<?php endwhile;?>
</div>
<!-- Timeline ends here -->
I am not sure using categories is the best way to do this. You are limiting yourself to one years worth of data. I would suggest actually using the post date to separate the posts, then your code could look something like this.
<div id="timeline">
<?php
//Define your custom post type name in the arguments
$args = array('post_type' => 'timeline', 'order' => 'asc' );
//Define the loop based on arguments
$loop = new WP_Query( $args );
//Display the contents
while ( $loop->have_posts() ) : $loop->the_post();
$thumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'large') );
$category = get_the_terms($post->ID, 'timeline_categories');
?>
<section id="<?php echo $post->ID; ?>">
<?php
if( $loop->current_post === 0 ) {
$current_quarter = $category[0]->name; ?>
<div class="quarterlyheading">
<?php echo $current_quarter; ?>
<div class="quarterlinebreak"><hr></div>
</div>
<?php } else {
$post_quarter = $category[0]->name;
if($current_quarter != $post_quarter) { ?>
<div class="quarterlyheading">
<?php echo $post_quarter; ?>
<div class="quarterlinebreak"><hr></div>
</div>
<?php }
}
$current_quarter = $post_quarter;
?>
<div class="timeline-item">
<?php
if( $loop->current_post === 0 ) {
$current_month = get_the_time('M'); ?>
<div class="timeline-icon">
<div class="timeline-month">
<?php echo $current_month; ?>
</div>
</div>
<?php } else {
$post_month = get_the_time('M');
if($current_month != $post_month) { ?>
<div class="timeline-icon">
<div class="timeline-month">
<?php echo $post_month; ?>
</div>
</div>
<?php }
}
$current_month = $post_month;
?>
<div class="timeline-content right">
<h2>
<?php the_title(); ?>
</h2>
<p>
<?php echo the_content(); ?>
</p>
<div class="timeline_img">
<img src="<?php echo $thumb; ?>" class="img-responsive">
</div>
</div>
</div>
</section>
<?php endwhile;?>
</div>

Categories