Display content if form field is filled - Do not display if field is empty

Question

I am using the following code within the footer of my test site. I am using WordPress and Advanced Custom Fields

The intention is:

• To display the HTML container .social-media--icons if any of the fields contain content within the CMS.

• Then, within the container .social-media--icons, display the relevant icon and href if that field is filled.

I have included strlen(trim($twitter)) > 0 as I understand this will detect if the field only has spaces.

I appear to have this working locally and performing the above tasks. I am looking to find out if there is a clearer, optmisied method of performing these tasks

<div class="site-info">
 <a id="toTopButton" href="#pageTop" class="to-top-button"><img src="<?php echo get_template_directory_uri(); ?>/svg/arrow.svg" alt="Up Arrow"></a>
 <p>&copy;
 <?php echo date('Y'); ?></p>
 <?php 
 $facebook = get_field('facebook', 'option');
 $twitter = get_field('twitter', 'option');
 $instagram = get_field('instagram', 'option');
?>
 <?php if(isset($facebook) && strlen(trim($facebook)) > 0 || isset($twitter) && strlen(trim($twitter)) > 0 || isset($instagram) && strlen(trim($instagram)) > 0): ?>
 <div class="social-media--icons">
 <?php if(isset($facebook) && strlen(trim($facebook)) > 0): ?>
 <a class="social-link ie9" href="<?php echo $facebook; ?>" target="_blank" rel="noopener">
 <img src="<?php echo get_template_directory_uri(); ?>/svg/facebook.svg" alt="Facebook Icon">
 </a>
 <?php endif; ?>
 <?php if(isset($twitter) && strlen(trim($twitter)) > 0): ?>
 <a class="social-link ie9" href="<?php echo $twitter; ?>" target="_blank" rel="noopener">
 <img src="<?php echo get_template_directory_uri(); ?>/svg/twitter.svg" alt="Twitter Icon">
 </a>
 <?php endif; ?>
 <?php if(isset($instagram) && strlen(trim($instagram)) > 0): ?>
 <a class="social-link ie9" href="<?php echo $instagram; ?>" target="_blank" rel="noopener">
 <img src="<?php echo get_template_directory_uri(); ?>/svg/instagram.svg" alt="Instagram Icon">
 </a>
 <?php endif; ?>
 </div>
 <?php endif; ?>
</div>

Answer 1

Oh yes, I recommend some DRYing principles here. Don't ask php to do the same thing over and over for the same result in a loop -- execute those tasks, just once, before entering the loop.

Rather than repeating whole portions of mark up only to change a few values, create a lookup array of the social networks that you want to cycle through and only replace those values in a reusable piece of the dom.

The social variables are always going to be "set", because they are unconditionally declared when get_field() is called. There is no point in isset().

If there are any qualifying socials, then the parent <div> will enclose all qualifying <a>-tagged-wrapped <img>s.

This ALSO makes it easy for you to scale your application. In case you ever want to add more socials in the future, just add a new element to $socials (assuming all of the other data is consistent) and you won't need to touch any part of the processing code.

Code: (Demo)

$socials = ['facebook', 'twitter', 'instagram'];
$templateDirectory = get_template_directory_uri();
foreach ($socials as $social) {
 $socialHref = trim(get_field($social, 'option'));
 if (strlen($socialHref)) {
 $socialLinks[] = sprintf(
 '<a class="social-link ie9" href="%s" target="_blank" rel="noopener">
 <img src="%s/svg/%s.svg" alt="%s Icon">
 </a>',
 $socialHref, $templateDirectory, $social, ucfirst($social)
 );
 }
}
if (isset($socialLinks)) {
 echo '<div class="social-media--icons">' , implode(' ', $socialLinks) , '</div>';
}

Output:

<div class="social-media--icons">
 <a class="social-link ie9" href="blah-facebook-blah" target="_blank" rel="noopener"><img src="https://example.com/svg/facebook.svg" alt="Facebook Icon"></a>
 <a class="social-link ie9" href="blah-twitter-blah" target="_blank" rel="noopener"><img src="https://example.com/svg/twitter.svg" alt="Twitter Icon"></a>
 <a class="social-link ie9" href="blah-instagram-blah" target="_blank" rel="noopener"><img src="https://example.com/svg/instagram.svg" alt="Instagram Icon"></a>
</div>