I have a foreach loop which retrieves the subcategories of the current category.
<?php $_categories = $this->getCurrentChildCategories(); ?>
<?php foreach ($_categories as $_category): ?>
<div class="item">
<?php echo $this->htmlEscape($_category->getName()) ?>
</div>
<?php endforeach; ?>
I want to divide the results in rows of three columns. The desired format is then:
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
...
---------------EDIT----------------
My code is now as follows. How and where do i close the row div?
<?php $_categories = $this->getCurrentChildCategories(); ?>
<?php foreach ($_categories as $_category): ?>
<?php if ($i % 3 == 0) { ?>
<div class="row">
<?php } ?>
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<?php $i++; endforeach; ?>
---------------EDIT 2----------------
Getting closer. This is the result:
<div class="category-list">
<div class="row"></div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
<div class="row">
<div class="item">
content
</div>
<div class="item">
content
</div>
<div class="item">
content
</div>
</div>
</div>
How do I get rid of the empty row?
The code is now as follows:
<div class="category-list">
<?php
$i=0;
echo '<div class="row">';
$_categories = $this->getCurrentChildCategories();
foreach($_categories as $_category):
{
if($i %3 ==0)
{ ?>
</div>
<div class="row">
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<? }
else
{ ?>
<div class="item">
<h2><?php echo $this->htmlEscape($_category->getName()) ?> »</h2>
</div>
<? }
$i++;
}
endforeach;
?>
</div>
---------------EDIT 3----------------
Solved by hiding the empty row via CSS.
You have to introduce az iterator (?) variable for example $i = 0
if ($i % 3 == 0) { //modulo
// use for whatever you want
}
In every cycle (maybe at the end of it, it depends on your real solution) you have to increment $i (++$i);
Hope this helps
<?php
$i=0;
echo"<div class="row" >
foreach($category as $cat)
{
if($i %3 ==0)
{
echo"</div><div class='row'> <div class='item'> Content </div>";
}
else
{
echo"<div class='item'> Content </div>";
}
$i++;
}
echo"</div>";
?>
Related
Very new Wordpress apprentice here. Trying to get my archive page to display posts in two columns going like:
Post 1 Post 2
Post 3 Post 4
Here is an example from a figma we were working on: https://ibb.co/N3XwtwD
My question is, what code can I add to my files to allow this? I currently have some bootstrap classes on the html portion I inserted here and it is displaying as one column, so I don't know if those classes will interfere with anything. Here is my archive.php code below:
<?php
get_header();
?>
<div class="container mt-5 mb-5">
<p class="font-size"><?php the_archive_title(); ?></p>
<hr>
</div>
<div class="container">
<?php
while(have_posts()) {
the_post(); ?>
<div class="row">
<div class="col-lg-6">
<p class="font-size text-center"><?php the_title();?></p>
<img class="img-fluid mb-3"<?php
the_post_thumbnail();
?>
<p class="category-font">Published on <?php the_time('n.j.y');?></p>
<p>Posted by <?php the_author_posts_link() ?></p>
</div>
</div>
<?php }
echo paginate_links();
?>
</div>
<?php
get_footer();
?>
First time posting here so apologies if I left anything important out. Really appreciate this place!
Thanks!
You need to create a row every two posts and you have to add <div class="col-lg-6"> two times in a row. check below code.
<?php get_header(); ?>
<div class="container mt-5 mb-5">
<p class="font-size"><?php the_archive_title(); ?></p>
<hr>
</div>
<div class="container">
<?php
$count = 1;
while( have_posts() ) { the_post();
if ( $count % 2 == 1){ ?>
<div class="row">
<?php } ?>
<div class="col-lg-6">
<p class="font-size text-center"><?php the_title();?></p>
<?php the_post_thumbnail(); ?>
<p class="category-font">Published on <?php the_time('n.j.y');?></p>
<p>Posted by <?php the_author_posts_link() ?></p>
</div>
<?php if ( $count % 2 == 0 ){ ?>
</div>
<?php } $count++; ?>
<?php }
if ( $count % 2 != 1 ) echo "</div>";
echo paginate_links(); ?>
</div>
Please replace with the below code that helps you.
<?php
get_header();
?>
<div class="container mt-5 mb-5">
<p class="font-size"><?php the_archive_title(); ?></p>
<hr>
</div>
<div class="container">
<?php
$counterval = 0;
while(have_posts()) {
the_post();
$counterval++;
if($counterval % 2 != 0)
{ ?>
<div class="row">
<?php } ?>
<div class="col-lg-6">
<p class="font-size text-center"><?php the_title();?></p>
<?php $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
if(!empty($featured_img_url)){ ?>
<img class="img-fluid mb-3" src="<?php echo esc_url($featured_img_url); ?>" />
<?php } ?>
<p class="category-font">Published on <?php the_time('n.j.y');?></p>
<p>Posted by <?php the_author_posts_link() ?></p>
</div>
<?php
if($counterval % 2 == 0)
{ ?>
</div>
<?php } ?>
<?php } ?>
<?php echo paginate_links();
?>
</div>
<?php
get_footer();
?>
I am having difficulty while having the dual container div inside my for each array loop. Getting "two-half" div after each "wrap" div. But need to wrap "two-half" div with 2 "wrap" inside.
Expected:
<div class="item">
<div class="two-half">
<div class="wrap">1</div>
<div class="wrap">2</div>
</div>
<div class="two-half">
<div class="wrap">3</div>
<div class="wrap">4</div>
</div>
</div>
<div class="item">
<div class="two-half">
<div class="wrap">5</div>
<div class="wrap">6</div>
</div>
<div class="two-half">
<div class="wrap">7</div>
<div class="wrap">8</div>
</div>
</div>
Code:
<div class="item">
<?php
$count = 1;
$array = array(1,2,3,4,5,6,7,8);
foreach($array as $item) { ?>
<div class="two-half">
<div class="wrap">
<?php echo $item; ?>
</div>
</div>
<?php if ($count%4 == 0) { ?>
</div>
<?php } $count++; } ?>
Please help me to get the expected output. Thanks!
Use array_chunk to split an array into chunks.
<?php
$array = range(1, 8);
$half = array_chunk($array, 2); // chunk for halfs
$item = array_chunk($half, 2); // chunk for item
$count = 1;
?>
{{-- Create div-item --}}
<?php foreach ($item as $parent) {?>
<div class="item">
{{-- Create div-half --}}
<?php foreach ($parent as $half) {?>
<div class="two-half">
{{-- Create div-wrap --}}
<?php foreach ($half as $item) {?>
<div class="wrap"><?php echo $count; ?></div>
<?php $count++;?>
<?php }?>
</div>
<?php }?>
</div>
<?php }?>
Result
<div class="item">
<div class="two-half">
<div class="wrap">1</div>
<div class="wrap">2</div>
</div>
<div class="two-half">
<div class="wrap">3</div>
<div class="wrap">4</div>
</div>
</div>
<div class="item">
<div class="two-half">
<div class="wrap">5</div>
<div class="wrap">6</div>
</div>
<div class="two-half">
<div class="wrap">7</div>
<div class="wrap">8</div>
</div>
</div>
I don't know what to do loop and active tab on php.Active only one tab at a time.
My tab
<div class="container content">
<div class="row tab-v3">
<div class="col-sm-3">
<?php do { ?>
<ul class="nav nav-pills nav-stacked">
<li><i></i><?php echo $row_menulist['mlname']; ?></li>
</ul>
<?php } while ($row_menulist = mysql_fetch_assoc($menulist)); ?>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div class="tab-pane fade in active" id="<?php echo $row_menulist['mlname']; ?>">
<?php do { ?>
<h4><?php echo $row_info['mlname']; ?></h4>
<p><?php echo $row_info['detail']; ?></p>
<?php } while ($row_info = mysql_fetch_assoc($info)); ?>
</div>
</div>
</div>
</div>
</div>
remove active class,i assume that change in loop not affect in design.
<div class="container content">
<div class="row tab-v3">
<div class="col-sm-3">
<?php do { ?>
<ul class="nav nav-pills nav-stacked">
<li><i></i><?php echo $row_menulist['mlname']; ?></li>
</ul>
<?php } while ($row_menulist = mysql_fetch_assoc($menulist)); ?>
</div>
<div class="col-sm-9">
<div class="tab-content">
<?php $count = 1; do { ?>
<div class="tab-pane fade in <?php if($count == '1') { echo 'active'; } ?>" id="<?php echo $row_menulist['mlname']; ?>">
<h4><?php echo $row_info['mlname']; ?></h4>
<p><?php echo $row_info['detail']; ?></p>
</div>
<?php $count++; } while ($row_info = mysql_fetch_assoc($info)); ?>
</div>
</div>
</div>
</div>
It's working!
I even use the same logic into a CMS PHP Based (SPIP).
<div class="row">
<div class="col-xs-12 col-sm-3">
<div class="w-100 srvc-tab">
<ul class="nav nav-tab">
<?php $count = 1; ?>
<BOUCLE_getServiceTitle (ARTICLES){id_rubrique=#ID_RUBRIQUE}{par id_article}{tous}>
<li class="<?php if($count == '1') { echo 'active'; } ?>">
<a href="#service-#COMPTEUR_BOUCLE" data-toggle="tab">
[(#TITRE)]
</a>
</li>
<?php $count++; ?>
</BOUCLE_getServiceTitle>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9">
<div class="w-100 tab-content">
<?php $count = 1; ?>
<BOUCLE_getServiceContent (ARTICLES){id_rubrique=#ID_RUBRIQUE}{tous}>
<div id="service-#COMPTEUR_BOUCLE" class="col-xs-12 tab-pane fade in <?php if($count == '1') { echo 'active'; } ?>">
<div class="w-100 mb-15 pb-15">
<h3 class="mb-0 text-capitalize fw-600">
[(#TITRE)]
<span class="d-inline-block stroke"></span>
</h3>
</div>
<div class="w-100">
[(#TEXTE)]
</div>
</div>
<?php $count++; ?>
</BOUCLE_getServiceContent>
</div>
</div>
<div class="clearfix"></div>
</div>
Here Is The Code
<div class="row">
<div class="col-md-9 column">
<div class="services-listing">
<?php if(!empty($data)):
foreach ($data as $rows ) : ?>
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
</div>
<!-- Service -->
<?php endforeach; else : echo "No Record Found Against This Services"; endif;?>
</div>
<!-- Service Listing -->
</div>
i want to start design from <div class="row"> not from <div class="service"> now it repeating this div i want new <div class="row"> genrated after every 6 records
<div class="row">
<div class="col-md-9 column">
</div>
</div>
Looking for something like this, let me know if it works for you
<?php
$start = 6;
$end = 1;
if(!empty($data)){
foreach ($data as $rows ) {
if ($start % 6 == 0) { ?>
<div class="row">
<div class="col-md-9 column">
<?php } ?>
<div class="services-listing">
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
</div>
<!-- Service -->
</div>
<?php if ($end % 6 == 0) { ?>
</div>
</div>
<?php } $start++; $end++;
}
}
else{ echo "No Record Found Against This Services"; }
?>
you need to wrap div row with foreach first and then:
<?php $i = 0; ?>
<?php if(!empty($data)):
foreach ($data as $rows ) : ?>
<?php $i++; ?>
<div class="row">
<div class="col-md-9 column">
<div class="services-listing">
<div class="service">
<div class="service-img"><span><img src="dashboard/uploads/<?php echo $rows['img'];?>" alt="" /></div>
<div class="service-detail">
<h3><?php echo $rows['name'];?></h3>
</div>
<!-- Service -->
</div>
<!-- Service Listing -->
</div>
<!-- col-md-9 column -->
</div>
<!-- Row -->
</div>
<?php if($i%6==0):?>
<div class="row">
<div class="col-md-9 column">
</div>
</div>
<?php endif; ?>
<?php endforeach; else : echo "No Record Found Against This Services"; endif;?>
just please re-check all divs structure to be sure whether all of them are closed
How Can I make it so that it only does foreach on the data and not the html columns?
<div class="columns">
<div class="title">Donation Amount</div>
<div class="title">Support</div>
<div class="title">View Grant</div>
<?php foreach ($results->result() as $grant) : ?>
<div class="col1"><p>AUD $<?php echo number_format($grant->user_budget);?></p></div>
<div class="col2"></div>
<div class="col3"></div>
</div>
<div class="clear"></div>
<?php endforeach ; ?>
Try this
<div class="columns">
<div class="title">Donation Amount</div>
<div class="title">Support</div>
<div class="title">View Grant</div>
<?php foreach ($results->result() as $grant) : ?>
<div class="col1"><p>AUD $<?php echo number_format($grant->user_budget);?></p></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="clear"></div>
<?php endforeach ; ?>
</div>