Display Taxonomy Terms with featured image

Requirements for this topic

• ACF
• Taxonomy / Custom Taxonomy / Built-in Taxonomy (category, tags etc.)
• Lazy Block

1. add/create a custom field on your ACF plugin for the featured image of your taxonomy.

There are 3 things to note on the images above. Refer it to its number.

1. Field Name – you need to copy the exact Field Name on this screenshot since it will affect your code on the lazyblock panel. If you really wanted a different Field Name then just make sure you change also the Field Name on your code.
2. Resturn Format – you also need to use the Image ID if not then just make sure you also updated its code.
3. Rules – make sure your taxonomy were set on the exact location.

This will be the display of your taxonomy :

2. Assuming that you have already created your taxonomy, or you use the builtin taxonomy of the wordpress, the next thing you will need to do is create your lazyblock block.

On the image above i created 2 fields taxonomy term and number of columns. then i use the PHP under the code section.

note : make sure you use the same slug for the 2 fields ‘taxonomy-term’, ‘number-of-columns’ or else you need to update the code.

3. Under the Code section copy and paste this code :

<?php
$tax_slug = $attributes['taxonomy-term'];
$tax_grid = "grid_".$attributes['number-of-columns'];


$taxonomies = get_terms( $tax_slug, array(
    'orderby' => 'id',
    'order'   => 'ASC',
    'hide_empty'=>false
) ); 

echo $attributes['control_name'];
?>
    <div class="dis-tax-container <?php echo $tax_grid; ?>">
        <?php 
		foreach( $taxonomies as $taxonomy ) { 
            ?>
                    <a href="<?php echo get_category_link($taxonomy->term_id); ?>" class="dis-tax-item">
						<div class="dis-tax-images" style="background-image: url(<?php echo wp_get_attachment_image_url(get_field('featured_image', 'news_category_'.$taxonomy->term_id),'full'); ?>);"></div>
                        <div class="taxonomy-hover-color">
                            <h2 class="taxonomy_name"><?php echo $taxonomy->name; ?></h2>
                        </div>
                    </a>
            <?php 
        }
        ?>
    </div>
<style>
	/* Grid Styles */
	.dis-tax-container.grid_3, .dis-tax-container{
	    display: grid;
    	grid-template-columns: repeat(3, 1fr);
	}

	.dis-tax-container.grid_2{
		grid-template-columns: repeat(2, 1fr);
	}

	.dis-tax-container.grid_1{
		grid-template-columns: repeat(1, 1fr);
	}

	.dis-tax-container.grid_4{
		grid-template-columns: repeat(4, 1fr);
	}

	.dis-tax-container.grid_5{
		grid-template-columns: repeat(5, 1fr);
	}

	.dis-tax-container.grid_6{
		grid-template-columns: repeat(6, 1fr);
	}

	/* END */

	.dis-tax-container a{
		position: relative;
	    min-height: 500px;
	    background: #000;
	}

	.dis-tax-container .dis-tax-images{
	    background-image: url(https://ripeconceptstesting.wpcomstaging.com/wp-content/uploads/2022/10/DSC09588blog.jpg);
	    background-size: cover;
	    background-repeat: no-repeat;
	    background-position: center;
	    min-height: 500px;
	}

	.dis-tax-container .taxonomy-hover-color{
		position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background-color: #000c;
	    transform: translateX(10%);
	    transition: 0.4s;
	    opacity: 0;
	    z-index: 5;
	}

	.dis-tax-container h2.taxonomy_name{
	    position: absolute;
	    bottom: 0;
	    color: #fff;
	    margin-bottom: 0;
	    padding-left: 90px;
	    padding-bottom: 62px;
	}

	.dis-tax-container a:hover .taxonomy-hover-color{
	    transform: translateX(0);
    	opacity: 1;
	}
</style>

4. Click save and you can now see the result. (check the image below for the result. or visit this link : https://ripeconceptstesting.wpcomstaging.com/test-inner-pages/ )

note : you can change the styling if you want a different styling from its default.