I'm using Advanced Custom Fields to create an interactive resume on my portfolio website. In the skills section I have three categories. Development, Design, and Tools. I use a repeater custom field on each of these to pass 4 sub fields that include information about that skill.
I divide each of these categories into 3 repeater fields for ease of filling out in the admin section. But the the three loops are essentially the same. They each look like this.
<h3>Development:</h3>
<?php // check if the repeater field has rows of data
if( have_rows('development') ):
// loop through the rows of data
while ( have_rows('development') ) : the_row();
// display a sub field value inside a card
?>
<?php
// VARIABLES //
$title = get_sub_field('title');
$logo = get_sub_field('logo');
$backImage = get_sub_field('background_image');
$overlay = get_sub_field('overlay_gradient');
$url = get_sub_field('url_link');
// THE SKILL BLOCK // ?>
<figure class="skill-block" style="<?php echo $overlay ?>">
<img class="back-image" src="<?php echo $backImage['url'] ?>"/>
<figcaption>
<div>
<img src="<?php echo $logo['url']?>">
<h4><?php echo $title ?></h4>
</div>
</figcaption>
<a href="<?php echo $url;?>">View more</a>
</figure>
<?php endwhile; //end of while statement
endif;
?>
<h3>Design</h3>
<?php // check if the repeater field has rows of data
if( have_rows('design') ):
// loop through the rows of data
while ( have_rows('design') ) : the_row();
// display a sub field value inside a card
?>
<?php
// VARIABLES //
$title = get_sub_field('title');
$logo = get_sub_field('logo');
$backImage = get_sub_field('background_image');
$overlay = get_sub_field('overlay_gradient');
$url = get_sub_field('url_link');
// THE SKILL BLOCK // ?>
<figure class="skill-block" style="<?php echo $overlay; ?>">
<img class="back-image" src="<?php echo $backImage['url']; ?>"/>
<figcaption>
<div>
<img src="<?php echo $logo['url']; ?>">
<h4> <?php echo $title; ?></h4>
</div>
</figcaption>
<a href="<?php echo $url;?>">View more</a>
</figure>
<?php endwhile; //end of while statement
endif;
?>
<h3>Tools</h3>
<?php // check if the repeater field has rows of data
if( have_rows('tools') ):
// loop through the rows of data
while ( have_rows('tools') ) : the_row();
// display a sub field value inside a card
?>
<?php
// VARIABLES //
$title = get_sub_field('title');
$logo = get_sub_field('logo');
$backImage = get_sub_field('background_image');
$overlay = get_sub_field('overlay_gradient');
$url = get_sub_field('url_link');
// THE SKILL BLOCK // ?>
<figure class="skill-block" style="<?php echo $overlay ?>">
<img class="back-image" src="<?php echo $backImage['url']; ?>"/>
<p>django <?php echo $backImage; ?></p>
<figcaption>
<div>
<img src="<?php echo $logo['url']; ?>">
<h4><?php echo $title; ?></h4>
</div>
</figcaption>
<a href="<?php echo $url;?>">View more</a>
</figure>
<?php endwhile; //end of while statement
endif;
?>
Rather than writing this thing out 3 times, and then when I edit the structure having to make that change 3 times, is it possible to save this loop structure to some kind of function and then pass it parameters that fill in the only part that changes (the part that specifies the name of the top level field such as "development" or "design" or "tools". Any thoughts? I'm new to programming and PHP espc but I'm trying to integrate DRY writing skills into my habits.