Project: WordPress project
Query: WP_Query()
With the single query I'm dealing with two loops - I call it loop within a loop. Structure is like below:
<?php
while( $my_query -> have_posts() ) :
$my_query -> the_post();
if( condition) { ?>
<div class="grid-box">
<div class="item">Item of this kind</div>
</div> <!-- .grid-box -->
<?php
}
if( condition) {
$someCounter = grab some counter here;
for( $inner = 0; $inner < $someCounter; $inner ++ ) {
?>
<div class="grid-box">
<div class="item">Item of that** kind#<?php echo $inner; ?></div>
</div> <!-- .grid-box -->
<?php
} //end for
}
endwhile;
?>
With CSS the query is doing excellent job for me, showing the items in nice grid-blocks. But with more items than a row, the items in second row colliding with the first. So I planned to put them within row class like:
<div class="row">
<!-- every 6 items within a grid -->
<div class="grid grid-first>Item of this kind</div>
<div class="grid>Item of this kind</div>
<div class="grid>Item of that** kind</div>
<div class="grid>Item of that** kind</div>
<div class="grid>Item of this kind</div>
<div class="grid grid-last>Item of that** kind</div>
</div>
<div class="row">
<div class="grid grid-first>Item of that** kind</div>
<div class="grid>Item of that** kind</div>
<div class="grid>Item of this kind</div>
</div>
Now I need to count the total items. How can I do this? Do I need to pass two counter and if so then how can I combine them both to count the exact counts and then use the count as conditions to load the div with .row? Please note as what I'm dealing with, the $inner counter is important for my dynamic code. But we can use the count for our total count.
For count you can use like this
<?php wp_count_posts( $type, $perm ); ?>
To get the published status type, you would call the wp_count_posts() function and then access the 'publish' property.
<?php
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish;
?>
Counting pages status types are done in the same way as posts and make use of the first parameter. Finding the number of posts for the post status is done the same way as for posts.
<?php
$count_pages = wp_count_posts('page');
?>
Related
simply i wanted to do this for a wordpress loop and i want the fallowing result.
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
//
} // end while
} // end if
?>
<div class="List-Module">
<div class="List-Module-Big">TITLE OF POST#1</div>
<div class="List-Module-Grid">
<div class="List-Module-Grid-Item">TITLE OF POST#2</div>
<div class="List-Module-Grid-Item">TITLE OF POST#3</div>
</div>
<div class="List-Module-Item">TITLE OF POST#4</div>
<div class="List-Module-Big">TITLE OF POST#5</div>
<div class="List-Module-Grid">
<div class="List-Module-Grid-Item">TITLE OF POST#6</div>
<div class="List-Module-Grid-Item">TITLE OF POST#7</div>
</div>
<div class="List-Module-Item">TITLE OF POST#8</div>
</div>
//loops all through 32 items
as you see 1n, 2n, 3n and 4n posts results have to be in different classes. Can you help?
I have 2 tables in database first one is $slide_images and second is $why_us and I am using owl carousel for images.
The $slide_images contains 10 rows.
The $why_us contains 3 rows.
I need each image take one row of $why_us that's mean the first 3 images will have a text from $why_us table.
I tried many ways to do that but it's not given me what I want and I can't edit tables to do that and the id column is not nested to join them with SQL.
Can i solve them with nested foreach?
<div class="home_area">
<!-- start Carousel -->
<div class="owl-carousel block_1">
<?php
if(is_array($slide_image)){
foreach($slide_image as $src){
?>
<div class="overlay-text">
<div class="carousel_item" style="background-image:url('<?php echo base_url(); echo $src->url; ?>');"></div>
<div class="text-layer">
<!--============ start we us ================ -->
<?php if($why_us != ''){ ?>
<div class="we">
<div class="container">
<div class="row">
<?php foreach($why_us as $we){ ?>
<div class="box">
<h6><?php echo $we->name; ?></h6>
<div class="text"><?php echo $we->desc; ?></div>
</div>
<?php }?>
</div>
</div>
</div>
<?php } ?>
<!--============= end we us ========== -->
</div>
</div>
<?php } }?>
</div>
<!-- end Carousel -->
</div>
I hope I described my question well.
You should not use nested loops. That creates a cross product between the arrays.
Instead, you should just have one loop that uses the corresponding elements of both arrays. Since one of the arrays is smaller, you should check that the index exists.
foreach ($slide_image as $index => $src) {
// code that uses `$src` here
if (isset($why_us[$index])) {
$we = $why_us[$index];
// code that uses $we here
}
}
So I'm working on a HTML carousel using Twitter Bootstrap, Wordpress and ACF Fields.
This carousel shows 2 items per row. Each of these items has a class of "col-md-6". So by showing 2 items per row, the total is 2 columns of "col-md-6" (which is perfect since this completes the 12 columns required by Bootstrap):
Here is my code:
<?php if (have_rows('columns_carousel_slide')) {
$count = 0; ?>
<div class="item active"><div class="row">
<?php while(have_rows('columns_carousel_slide')) {
the_row();
if ($count > 0 && (($count % 2) == 0)) {
?>
</div> <!--.item -->
</div> <!--.row -->
<div class="item">
<div class="row">
<?php } ?>
<div class="col-md-6">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-6 -->
<?php $count++; } ?>
</div> <!--.item -->
</div> <!--.row -->
<?php } ?>
However, I would like to know if there's a way to detect if there's 1 item per row and if so, then show a "col-md-12" instead of a "col-md-6" in order to fill in the remaining space of not having 2 items.
Any ideas are welcome.
Thanks!
--
Edit: As suggested by Jakub, I've updated my code to the following:
<?php if (have_rows('columns_carousel_slide')) {
$count = 0; ?>
<div class="item active"><div class="row">
<?php
$multiplier = 1; //that could actually go before the while
if (count(get_field('columns_carousel_slide'))%2 === 1 &&
$count === count(get_field('columns_carousel_slide'))-1) {
$multiplier = 2;
} ?>
<?php while(have_rows('columns_carousel_slide')) {
the_row();
if ($count > 0 && (($count % 2) == 0)) {
?>
</div> <!--.item -->
</div> <!--.row -->
<div class="item">
<div class="row">
<?php } ?>
<div class="col-md-<?php echo (6*$multiplier);?>">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-6 -->
<?php $count++; } ?>
</div> <!--.item -->
</div> <!--.row -->
<?php } ?>
However, I think I've must have missed something because I am getting total of "col-md-12" for all the rows.
Assuming that "get_field" returns the array with all rows, then you would need to change the following:
<div class="col-md-6">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-6 -->
with this:
<?php
$multiplier = 1; //that could actually go before the while
if (count(get_field('columns_carousel_slide'))%2 === 1 &&
$count === count(get_field('columns_carousel_slide'))-1) {
$multiplier = 2;
} ?>
<div class="col-md-<?php echo (6*$multiplier);?>">
<h2><?php the_sub_field('columns_carousel_slide_title'); ?></h2>
</div> <!--.col-md-12 -->
A short explanation:
initially we set the multiplier to 1 (so that 6*1 = 6 for paired
columns).
we do a condition to check if number of items is even
and we are currently processing the last item. If so - we set the
multiplier to 2 (so that 6*2 = 12 for single column)
we set the class to be "col-md-" and the result of our calculation (either 6 or 12)
Looking to solve a problem I'm having dynamically defining classes using WordPress Advanced Custom Fields' Repeater field. I've done some digging but haven't been able to find a resource with the specificity that I'm looking for.
I'm displaying a series of portfolio images, and depending on how many there are I would like to give certain photos specific class names within the Foundation grid. Essentially I'm looking to do the following:
For items 1-4: Apply a class of large-6
For items 5+: Apply a class of large-4
If only 1 item: Apply a class of large-8
I've been able to get the first two examples to work, but I'm having trouble defining a third set of parameters. I've tried a number of different routes but I'm not sure what's best at this point. See below for a mockup of what I am looking to accomplish, as well as my code example.
Appreciate any advice!
<div class="row portfolio-examples">
<?php
if( have_rows('portfolio_examples') ):
while ( have_rows('portfolio_examples') ) : the_row();
$count = 0;
$work = get_sub_field('portfolio_work');
?>
<?php if ($count != 0 || $count < 4) :?>
<div class="large-6 medium-6 columns end">
<?php if( $work ): ?>
<img src="<?php echo $work['url']; ?>" alt="<?php echo $work['alt'] ?>" />
<?php endif; ?>
</div>
<?php else: ?>
<div class="large-8 medium-8 large-centered medium-centered columns">
<?php if( $work ): ?>
<img src="<?php echo $work['url']; ?>" alt="<?php echo $work['alt'] ?>" />
<?php endif; ?>
</div>
<?php endif; ?>
<?php
$counter++;
endwhile;
endif;
?>
</div>
Your question is not clear enough to me because you say Apply a class of large or Apply a class of small, but then in your code you use .large-6 and also .large-8.
Anyway, supposing what you're trying to achieve (given your image), your PHP code should be something like this:
<div class="row portfolio-examples">
<?php
if (have_rows('portfolio_examples')) :
/* We need to know the total number
* of rows in your repeater since you have
* a case where there's only one item.
*/
$portfolio = get_field('portfolio_examples');
$count = is_array($portfolio) ? count($portfolio) : 0;
$index = 0;
while (have_rows('portfolio_examples')) : the_row();
if ($count == 1) :
/* Place here your code for when
* there's only 1 item in your portfolio.
*/
?>
<div class="medium"><!-- Medium item --></div>
<?php
elseif ($count > 1 && $index <= 3) :
// Code for your first 4 items
?>
<div class="large"><!-- Large item --></div>
<?php
elseif ($count > 1 && $index > 3) :
// Code for your 5+ items
?>
<div class="small"><!-- Small item --></div>
<?php
else :
// There are no items in your portfolio.
endif;
$index++;
endwhile;
endif;
?>
</div>
Notice: You were reseting to 0 your iterator index ($count in your case) in every iteration. Also, you were incrementing $counter (not $count) which wasn't defined.
I have a parent page that acts as menu for my portfolio.
It pulls in thumbnail images from the child pages which i have been able to accomplish with magic fields and some code. It dumps the images into a grid layout. The thumbnails are pulled into one container div like so:
div id="folio-content">
<div class="thumb-container">
<div class="thumb"><img src="/images/pic.jpg"/>
</div>JCPenny</div>
... </div>`
when the div gets filled up with 2 thumbnails I want to create a new container div and fill it with 2 images again and so on after 2 images.
So, if you had 4 images it would look like this.
<div id="folio-content"><!--/Main Container/-->
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>JCPenny</div>
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>Champ Car</div></div>
<div id="folio-content"><!--/Main Container/-->
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>JCPenny</div>
<div class="thumb-container">
<div class="thumb"><img src="/images/pic1.jpg"/>
</div>Champ Car</div></div>
this is the code I am using in my page.php file.
<?php get_header(); ?>
<div id="folio-content">
<?php
$projectpage = get_pages('child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
$count = 0;
foreach($projectpage as $page)
{
$content = $page->post_content;
if(!$content)
continue;
if ($count == 10) --- this is geting 10 images now, but I want to get them all.
break;
$count++;
$content = apply_filters('the_content', $content);
?>
<div class="thumb-container">
<div class="thumb"><a href="<?php echo get_permalink($page->ID); ?>"<?php echo get_image ("thumbnail",1,1,1,$page->ID);?></a>
</div><?php echo $page->post_title ?>
</div>
<?php
}
?>
</div><!--/close set!-->
</div>
also, how can I get ALL child pages? I have it set to 10 now with this if ($count == 10)
any help? thanks a ton again!!!!
I'm not familiar with "get_pages" but since Wordpress treats posts and pages in an identical manner you could use this.
$projectpage = get_posts('numberposts=-1&post_type=page&child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
The -1 removes the limit and gets ALL the specified pages.
I have cobbled together some code, that sort of sounds right but does not work at all! Which I am not surprised. But it is a starting point - please take a look at this code, maybe it is step in the right direction?
<?php
$projectpage = get_posts('numberposts=-1&post_type=page&child_of='.$post->ID.'&sort_column=post_date&sort_order=desc');
if (have_posts()) :
$i=0; // counter
while(get_posts()) : the_post();
if($i%2==0) { // if counter is multiple of 3, put an opening div ?>
<!-- <?php echo ($i+1).'-'; echo ($i+2); ?> -->
<div>
<?php } ?>
<div class="single_item">
<h2><?php the_title(); ?></h2>
</div>
<?php $i++;
if($i%2==0) { // if counter is multiple of 3, put an closing div ?>
</div>
<?php } ?>
<?php endwhile; ?>
<?php
if($i%2!=0) { // put closing div here if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>
<?php endif; ?>