Ask your WordPress questions! Pay money and get answers fast! (more info)

Generate opening and closing tags on a foreach loop WordPress

  • SOLVED

The below code outputs social media links on the frontend of my website.

If a social media link (theme mod key/value) is found for any of the ten named services, a corresponding icon and link are generated.


<div id="connect" class="connect">
<ul class="social-icons">
<?php
$social_media_links = array( 'facebook', 'flickr', 'googleplus', 'instagram', 'linkedin', 'pinterest', 'skype', 'twitter', 'vimeo', 'youtube' );
foreach ($social_media_links as $key => $value) {
$link = get_theme_mod( $value );
if( ! empty( $link ) ) { ?>
<li><a href="<?php echo $link; ?>"><i class="gi gi-<?php echo $value; ?>"></i></a></li>
<?php }
}
?>
</ul><!-- .social-icons -->
</div><!-- .connect -->


Please can someone modify the code above so 1) the opening div and ul elements are only created if a social media link is found and 2) the closing ul and div elements are created after any social media links have been generated.

I do not want to output empty markup if no links are found - as happens with my current code.

Thank you

Answers (3)

2014-04-25

Dbranes answers:

Please try the following:

<?php
$li = '';
$social_media_links = array( 'facebook', 'flickr', 'googleplus', 'instagram', 'linkedin', 'pinterest', 'skype', 'twitter', 'vimeo', 'youtube' );
foreach ($social_media_links as $key => $value) {
$link = get_theme_mod( $value );
if( ! empty( $link ) ) {
$li .= sprintf( '<li><a href="%s"><i class="gi gi-%s"></i></a></li>', esc_url( $link ), esc_attr( $value ) );
}
}
?>

<?php if( ! empty( $li ) ): ?>
<!-- output -->
<div id="connect" class="connect">
<ul class="social-icons">
<?php echo $li; ?>
</ul><!-- .social-icons -->
</div><!-- .connect -->
<?php endif; ?>


where I added <em>esc_url()</em> and <em>esc_attr()</em> to your links and values.


designbuildtest comments:

Superb, thank you Dbranes. Really appreciate the extra effort escaping the links and values (I'm also escaping these inputs before they hit the database). All three proposed solutions work like a charm, but I like your one best. Thanks again.


Dbranes comments:

Good to hear it worked for you @designbuildtest. The <em>esc_*()</em> functions are always handy for the output escaping.

2014-04-25

Hariprasad Vijayan answers:

Hello,

Try this

<?php
$ctr = 0;
$social_media_links = array( 'facebook', 'flickr', 'googleplus', 'instagram', 'linkedin', 'pinterest', 'skype', 'twitter', 'vimeo', 'youtube' );
foreach ($social_media_links as $key => $value) {
$link = get_theme_mod( $value );
if( ! empty( $link ) ) {
?>
<?php if($ctr==0){ ?>
<div id="connect" class="connect">
<ul class="social-icons">
<?php $ctr++; } ?>
<li>
<a href="<?php echo $link; ?>"><i class="gi gi-<?php echo $value; ?>"></i></a>
</li>
<?php }
}
if($ctr != 0)
{
?>
</ul><!-- .social-icons -->
</div><!-- .connect -->
<?php
}
?>


designbuildtest comments:

Works great. much appreciated Hariprasad.


Hariprasad Vijayan comments:

Thanks.

2014-04-25

zebra webdesigns answers:

Simple and clean method.



<?php
$social_media_links = array( 'facebook', 'flickr', 'googleplus', 'instagram', 'linkedin', 'pinterest', 'skype', 'twitter', 'vimeo', 'youtube' );
ob_start();
foreach ($social_media_links as $key => $value) {

$link = get_theme_mod( $value );

if( ! empty( $link ) ) { ?>

<li><a href="<?php echo $link; ?>"><i class="gi gi-<?php echo $value; ?>"></i></a></li>

<?php } }
$social_media_content = ob_get_contents();

ob_end_clean();
if( $social_media_content){
?>

<div id="connect" class="connect">
<ul class="social-icons">
<?php echo $social_media_content;
?>
</ul><!-- .social-icons -->
</div><!-- .connect -->
<?php } ?>


designbuildtest comments:

Excellent. Thanks Zebra.