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.
So I tried it and it does work! I couldn't find an answer directly on the internet as it relates to PHP which is why I asked here but this is what I tried using what I remember from my javascript classes.
function skillz($section) {
if( have_rows($section) ):
// loop through the rows of data
while ( have_rows($section) ) : 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;
};
<h2>Skills:</h2>
<h3>Development:</h3>
<?php skillz(development); ?>
<h3>Design</h3>
<?php skillz(design); ?>
<h3>Tools</h3>
<?php skillz(tools); ?>
How about this?
<?php
$skills = array( 'development', 'design', 'tools' );
foreach ($skills as $skill) :
?>
<h3><?php echo ucfirst( $skill ); ?>:</h3>
<?php // check if the repeater field has rows of data
if( have_rows( $skill ) ):
// loop through the rows of data
while ( have_rows( $skill ) ) : 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');
?>
<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;
endforeach;
?>