omukiguy omukiguy - 8 days ago 7
PHP Question

Getting first item in the PHP foreach loop

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

Answer

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