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>