Skip to content

Instantly share code, notes, and snippets.

@morgyface
Last active April 11, 2024 22:37
Show Gist options
  • Save morgyface/d8c1c4246843bf0f0c76959b68faa95f to your computer and use it in GitHub Desktop.
Save morgyface/d8c1c4246843bf0f0c76959b68faa95f to your computer and use it in GitHub Desktop.
WordPress | ACF | Social Media Links using Advanced Custom Fields and FontAwesome
<?php
if( have_rows('social_media', 'option') ):
echo '<div class="container social my-4">';
echo '<p class="follow mb-0 align-middle">Follow us</p>';
echo '<ul class="nav align-middle">';
while ( have_rows('social_media', 'option') ) : the_row();
$socialchannel = get_sub_field('social_channel', 'option');
$socialurl = get_sub_field('social_url', 'option');
echo '<li class="nav-item">';
echo '<a class="nav-link" rel="nofollow noopener noreferrer" href="' . $socialurl . '" target="_blank">';
echo '<i class="fa fa-' . $socialchannel . '" aria-hidden="true"></i>';
echo '<span class="sr-only hidden">' . ucfirst($socialchannel) . '</span>';
echo '</a></li>';
endwhile;
echo '</ul>';
echo '</div>';
endif;
?>
@edulecca
Copy link

edulecca commented Oct 2, 2019

appreciate it!

@theSalafee
Copy link

theSalafee commented Jul 14, 2022

Great work! Awesome write up as well! I did something like this today on the job using your example. However, I used fa-youtube-play instead.

                <?php
                if (have_rows('social_media', 'option')):

                    echo '<div class="social-block">';

                    while (have_rows('social_media', 'option')) : the_row();

                        $socialchannel = get_sub_field('social_channel', 'option');
                        $socialurl = get_sub_field('social_url', 'option');

                        echo '<a rel="noopener" target="_blank" href="' . $socialurl . '"><i
                                class="fa fa-' . $socialchannel . '" aria-hidden="true"></i><i class="fa fa-' . $socialchannel . ' two"
                                                                                aria-hidden="true"></i></a>';
                    endwhile;
                endif;
                ?>

@morgyface
Copy link
Author

Nice work @theSalafee. Glad it helped!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment