2
\$\begingroup\$

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>
\$\endgroup\$
2
\$\begingroup\$

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>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.