Display content if form field is filled - Do not display if field is empty 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)) &gt; 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

&lt;div class="site-info"&gt;
  &lt;a id="toTopButton" href="#pageTop" class="to-top-button"&gt;&lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/svg/arrow.svg" alt="Up Arrow"&gt;&lt;/a&gt;
  &lt;p&gt;&amp;copy;
    &lt;?php echo date('Y'); ?&gt;&lt;/p&gt;

  &lt;?php 

    $facebook = get_field('facebook', 'option');
    $twitter = get_field('twitter', 'option');
    $instagram = get_field('instagram', 'option');
?&gt;

  &lt;?php if(isset($facebook) &amp;&amp; strlen(trim($facebook)) &gt; 0 || isset($twitter) &amp;&amp; strlen(trim($twitter)) &gt; 0 || isset($instagram) &amp;&amp; strlen(trim($instagram)) &gt; 0): ?&gt;
  &lt;div class="social-media--icons"&gt;
    &lt;?php if(isset($facebook) &amp;&amp; strlen(trim($facebook)) &gt; 0): ?&gt;
    &lt;a class="social-link ie9" href="&lt;?php echo $facebook; ?&gt;" target="_blank" rel="noopener"&gt;
        &lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/svg/facebook.svg" alt="Facebook Icon"&gt;
    &lt;/a&gt;
    &lt;?php endif; ?&gt;

    &lt;?php if(isset($twitter) &amp;&amp; strlen(trim($twitter)) &gt; 0): ?&gt;
    &lt;a class="social-link ie9" href="&lt;?php echo $twitter; ?&gt;" target="_blank" rel="noopener"&gt;
        &lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/svg/twitter.svg" alt="Twitter Icon"&gt;
    &lt;/a&gt;
    &lt;?php endif; ?&gt;

    &lt;?php if(isset($instagram) &amp;&amp; strlen(trim($instagram)) &gt; 0): ?&gt;
    &lt;a class="social-link ie9" href="&lt;?php echo $instagram; ?&gt;" target="_blank" rel="noopener"&gt;
        &lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/svg/instagram.svg" alt="Instagram Icon"&gt;
    &lt;/a&gt;
    &lt;?php endif; ?&gt;
  &lt;/div&gt;
  &lt;?php endif; ?&gt;
&lt;/div&gt;
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 &lt;div&gt; will enclose all qualifying &lt;a&gt;-tagged-wrapped &lt;img&gt;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(
            '&lt;a class="social-link ie9" href="%s" target="_blank" rel="noopener"&gt;
                 &lt;img src="%s/svg/%s.svg" alt="%s Icon"&gt;
            &lt;/a&gt;',
            $socialHref, $templateDirectory, $social, ucfirst($social)
        );
    }
}
if (isset($socialLinks)) {
    echo '&lt;div class="social-media--icons"&gt;' , implode(' ', $socialLinks) , '&lt;/div&gt;';
}


Output:

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