How to echo unique incremental id to div in foreach loop?

Question

so i'm trying to use 'foreach' to have each of the div generated to have an incremental id, eg box1 box2 box3 etc.

this in my php file

<div id="box">
    <aside class="meta">

    </aside>

    <section class="post-content">


    </section><!--/.post-content -->

</article><!-- /.post -->

generates 4 of this:

<div id="box">
        <aside class="meta">
        </aside>

        <section class="post-content">            
        </section><!--/.post-content -->

</div>

how do i get (in a simplified form)

<div id="box1">
</div>

<div id="box2">
</div>

<div id="box3">
</div>

<div id="box4">
</div>

i've looked through an earlier question How to Assign a unique class to each item returned in a loop? but i can't make sense of it to work in my context.

UPDATE:

here's my unedited php code:

<div id="box" <?php post_class(); ?>>
    <aside class="meta">
        <a href="<?php echo get_author_posts_url(get_the_author_meta( 'ID' )); ?>">
            <?php echo get_avatar( get_the_author_meta('email'), '128' ); ?>
        </a>
        <span class="month"><?php the_time( 'M' ); ?></span>
        <span class="day"><?php the_time( 'd' ); ?></span>
        <span class="year"><?php the_time( 'o' ); ?></span>
    </aside>

    <section class="post-content">
        <?php 
            if ( isset( $woo_options['woo_post_content'] ) && $woo_options['woo_post_content'] != 'content' ) { 
                woo_image( 'width=' . $settings['thumb_w'] . '&height=' . $settings['thumb_h'] . '&class=thumbnail ' . $settings['thumb_align'] ); 
            } 
        ?>

        <header>
            <h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
            <?php woo_post_meta(); ?>
        </header>

        <section class="entry">
        <?php if ( isset( $woo_options['woo_post_content'] ) && $woo_options['woo_post_content'] == 'content' ) { the_content( __( 'Continue Reading &rarr;', 'woothemes' ) ); } else { the_excerpt(); } ?>
        </section>


    </section><!--/.post-content -->

</div><!-- /.post -->

Any type of loop will do with an incrementing variable and break when you reach your max value, the loop will stop displaying content after the break, but should you require a string with an appended number, use concatenation — Daryl Gill, Apr 27 '14 at 12:33

score 2 · Answer 1 · answered Apr 27 '14 at 12:35

2

Try this using for loop

for ($i = 1; $i <= 4; $i++) {
    ?>

    <div id = "box<?php echo $i ?>"></div >

<?php
}

answered Apr 27 '14 at 12:35

Shairyar

3,268
7
46
86

Mike Grabowski · Accepted Answer · 2014-04-27T12:58:38.783

1

Assuming you are playing around with Wordpress, posts are being rendered within while loop.

Probably your post template is beign fetched by another file by using

get_template_part

#1 Use css

Use css to apply custom stylesheets. Apply custom class to your divs, like .customdiv, and then style them by using div.customdiv:nth-child(x). No further modifications needed.

#2 Move your single template into the main php file

You can copy your template part to main file and replace

get_template_part(..)

with its content. Not a good idea as you will have to do this in all of the main files that use this template. It will be harder to modify them in the future.

#3 Awful but working(?)

// might not work, as I haven't been using globals for ages. I strongly advise you against that method, it's FYI here

Just do the following in your main php file:

//before starting the while loop
$divId = 0;

And in your file with template at the same beginning:

global $divId;

Then, just replace following:

id="box"

with

id="box<?php echo ++$divId; ?>"

edited Apr 27 '14 at 12:58

answered Apr 27 '14 at 12:37

Mike Grabowski

1,955
16
17

i tried this. but all the id = box1 instead of incrementing. any idea why? – wsgg Apr 27 '14 at 12:41
@mfk ok, I know why it does not work. Probably loop is in different file than the the entire post template. – Mike Grabowski Apr 27 '14 at 12:44
is $i in the last line supposed to be.. $divID? – wsgg Apr 27 '14 at 12:56
yep, sorry, my mistake. – Mike Grabowski Apr 27 '14 at 12:56
#3 worked like a charm. thanks! but is there a reason why you'd call it awful? – wsgg Apr 27 '14 at 12:58
Basically, in modern code we should avoid using them. There are dozens of discussion over the internet about that, you can read sth here -> http://stackoverflow.com/a/12446305/3110982. I think that in your case it's ok to use that. – Mike Grabowski Apr 27 '14 at 13:02

score 0 · Answer 3 · answered Apr 27 '14 at 12:36

0

Maybe try (simplified):

<?php
$i = 0;
foreach ($data as $key => $value)
{
    $i++;
    echo '<div id="box' . $i . '">';
    // content
    echo '</div>';
}

answered Apr 27 '14 at 12:36

chris---

1,536
1
13
14

Typo, should be $key => $value ;) – Mike Grabowski Apr 27 '14 at 12:38

score 0 · Answer 4 · answered May 18 '17 at 06:59

0

<?php 
$counter = 1; 
foreach($results as $result){
?>
<div id="box<?php echo $counter; ?>">
</div>
<?php $counter++;
} ?>

answered May 18 '17 at 06:59

Jaspreet Saini

31
2

How to echo unique incremental id to div in foreach loop?

4 Answers4