Getting first item in the PHP foreach loop

Question

Need help to loop through this. I want to add a different styling to my first item in the loop.

I have tried to use How to determine the first and last iteration in a foreach loop? and PHP - Grab the first element using a foreach somehow it is not wroking out. The two blocks above also seem to share issues of speed on applying code

Look at the comments in the code to better understand my question.

  <?php 
                        $prod_categories = get_terms( 'product_cat', array( 'posts_per_page' => -1, 'orderby' => 'date', 'order' => 'ASC', 'hide_empty' => true ));

                        foreach( $prod_categories as $prod_cat => $item ) {
                            $cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
                            $shop_catalog_img = wp_get_attachment_image_src( $cat_thumb_id, 'shop_catalog' );
                            $term_link = get_term_link( $prod_cat, 'product_cat' );  ?>

                            <!-- if first item echo
                            <div class="col-md-8 fig-hold">
                                <a href="<?php echo $term_link; ?>" style="text-decoration: none;">
                                    <div class="figure">
                                        <img src="<?php echo $shop_catalog_img[0]; ?>" class="img-responsive" alt="<?php echo $prod_cat->name; ?>" />
                                        <div class="figureName"><?php echo $prod_cat->name; ?></div>
                                    </div>
                                </a>
                            </div>


                            else -->                
                            <div class="col-md-4 fig-hold">
                                <a href="<?php echo $term_link; ?>" style="text-decoration: none;">
                                    <div class="figure">
                                        <img src="<?php echo $shop_catalog_img[0]; ?>" class="img-responsive" alt="<?php echo $prod_cat->name; ?>" />
                                        <div class="figureName"><?php echo $prod_cat->name; ?></div>
                                    </div>
                                </a>
                            </div>

                    <?php } wp_reset_query(); ?>

@ionut I am trying it out but so far. It's not displaying the results — omukiguy, Nov 29 '16 at 14:01
Well, that's another problem. You should post another question about that. My code should work on this question. — Ionut Necula, Nov 29 '16 at 14:02

Ionut Necula · Accepted Answer · 2016-11-29T13:53:45.897

You can add a counter, and based on that, add a class to the first element, and you can now style that class with CSS:

<?php
$prod_categories = get_terms('product_cat', array(
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order' => 'ASC',
    'hide_empty' => true
));
$count = 0;
$class = '';
foreach ($prod_categories as $prod_cat => $item) {
    $count++;
    if ($count == 1) {
        $class = 'extra_class';
    }else{
        $class = '';
    }
    $cat_thumb_id     = get_woocommerce_term_meta($prod_cat->term_id, 'thumbnail_id', true);
    $shop_catalog_img = wp_get_attachment_image_src($cat_thumb_id, 'shop_catalog');
    $term_link        = get_term_link($prod_cat, 'product_cat');
?>             
          <div class="col-md-4 fig-hold <?php echo $class; ?>">
                <a href="<?php echo $term_link; ?>" style="text-decoration: none;">
                   <div class="figure">
                      <img src="<?php echo $shop_catalog_img[0]; ?>" class="img-responsive" alt="<?php echo $prod_cat->name; ?>" />
                      <div class="figureName"><?php echo $prod_cat->name; ?></div>
                   </div>
                 </a>
          </div>

<?php
} wp_reset_query();
?>

I moved the loop after the variables and executed the classes (Bootstrap) — omukiguy, Nov 29 '16 at 14:11

score 0 · Answer 2 · answered Nov 29 '16 at 14:11

Here is my final code. Thanks @ionut

<?php 
    $prod_categories = get_terms( 'product_cat', 
                                 array( 'posts_per_page' => -1, 'orderby' => 'date', 'order' => 'ASC', 'hide_empty' => true ));

    foreach( $prod_categories as $prod_cat ) {
        $cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
        $shop_catalog_img = wp_get_attachment_image_src( $cat_thumb_id, 'shop_catalog' );
        $term_link = get_term_link( $prod_cat, 'product_cat' ); 

    $count++;
    if ($count == 1) {  $class = 'col-md-8'; } else{ $class = 'col-md-4'; }
     ?>
    <div class="<?php echo $class; ?> fig-hold">
        <a href="<?php echo $term_link; ?>" style="text-decoration: none;">
            <div class="figure">
                <img src="<?php echo $shop_catalog_img[0]; ?>" class="img-responsive" alt="<?php echo $prod_cat->name; ?>" />
                <div class="figureName"><?php echo $prod_cat->name; ?></div>
            </div>
        </a>
    </div>

<?php } wp_reset_query(); ?>

Getting first item in the PHP foreach loop

2 Answers2