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)
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.
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.
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.