Loop Category with custom text field and add current-cat class

• Juxt

• April 2, 2020 at 9:05 pm

Hello everybody,
I would like to create a carousel with Categories on my Index page.
For each category I have inserted a custom field called “icon” in which I insert an Awesome Font icon.

On the Index page the carousel works, showing me all the categories and the relative icon.

On the “Category” page I would need to always have the carousel with the categories, but pass the “current-cat” class to diversify the color of the category. (I’m trying to reproduce the graphics in the Instagram or Behance stories.)

The code I made on the “Index” page is the following (hoping it is correct):

<?php
$taxonomy = 'category';
$queried_term = get_term_by( 'slug', get_query_var($taxonomy), 0 );
$terms = get_terms($taxonomy);
$terms = get_terms(
array(
'parent' => 0
)
);
$term = get_term('category' );
if ($terms) {
                                    
foreach($terms as $term) {
                                
$icon = get_field('icon', $taxonomy . '_' . $term->term_id);     
                                                        
if( get_field('icon', $taxonomy . '_' . $term->term_id)):
?>
<div class="item category-carousel">
<a href="<?php echo get_term_link($term->slug, $taxonomy) ?>" title="Consulta i lavori nella Categoria: <?php echo $term->name ?>">
<span class="cat-icon"><?php echo $icon; ?></span>
<span class="cat-name"><?php echo $term->name ?></span>
</a>   
</div><!--/.item-->    
<?php  endif; }
}
?>

The code I made on the “Category” page should be the same, but adding the “current-cat” class or something similar to the “span cat-icon” in order to diversify the color with CSS.

I hope someone can help me, thank you very much.

• John Huebner

• April 2, 2020 at 11:12 pm

I would add the class to the container, but wherever you add it the code would be similar.

<?php
$taxonomy = 'category';
$queried_term = get_term_by( 'slug', get_query_var($taxonomy), 0 );
$terms = get_terms($taxonomy);
$terms = get_terms(
array(
'parent' => 0
)
);
$term = get_term('category' );
if ($terms) {
                                    
foreach($terms as $term) {
                                
$icon = get_field('icon', $taxonomy . '_' . $term->term_id);

$cat_class = 'category-'.$term->slug;    
                                                        
if( get_field('icon', $taxonomy . '_' . $term->term_id)):
?>
<div class="item category-carousel <?php echo $cat_class; ?>">
<a href="<?php echo get_term_link($term->slug, $taxonomy) ?>" title="Consulta i lavori nella Categoria: <?php echo $term->name ?>">
<span class="cat-icon"><?php echo $icon; ?></span>
<span class="cat-name"><?php echo $term->name ?></span>
</a>   
</div><!--/.item-->    
<?php  endif; }
}
?>

• Juxt

• April 2, 2020 at 11:47 pm

Thank you very much @hube2, the solution seems pretty easy, but I have a problem: in this way each div “item” has the name of each category and I predict every category name in my CSS.

How instead I could transform your $ cat_class into a generic variable in the sense: I take the name of the current category (the one I’m seeing) and I associate it with a generic class (example: current-class) so in my CSS I could say: if the class is current-class then this is the rule.

My CSS Code:

.category-carousel .cat-icon{
   border:2px solid #0057ff;
   display:inline-block;
   height:50px;
   width:50px;
   line-height:46px;
   border-radius:100%;
   -webkit-border-radius:100%;
   -moz-border-radius:100%;
   -webkit-box-shadow: 1px 1px 10px -6px rgba(0,0,0,0.3);
   -moz-box-shadow: 1px 1px 10px -6px rgba(0,0,0,0.3);
   box-shadow: 1px 1px 10px -6px rgba(0,0,0,0.3);}

/*Current Category*/
.category-carousel .cat-icon.category-fotografia{
    border:2px solid #000;}

Thanks a lot for the answer.

• John Huebner

• April 4, 2020 at 1:42 am

you can use ‘$term->name’ but you’ll need to transform it the same way you transform it when writing the CSS. For example, are you removing spaces? special characers? The term slug is usually the same as the term name made safe for uses such as this.

• John Huebner

• April 4, 2020 at 1:46 am

Also the term slug should never change, unlike the term name which is easy to change. Even the slug can be changed but it is more difficult.

I would create a custom field on the terms for setting the color and then I’d code this into the template to ensure that I don’t have to revisit the css every time someone adds or changes a term.

$color = get_field('color_field_name', $term);

//.....

<span class="cat-icon" style="color: <?php echo $color; ?>"><?php echo $icon; ?></span>

• Juxt

• April 4, 2020 at 3:12 am

Thank You very much for your time and code. This is perfect. Have a nice day!