ACF Social Media List #wp #acf

social-media.php

<?php

// Add this to functions.php acf options page

acf_add_options_sub_page(
	array(
		'page_title'  => 'Social Media Channels',
		'menu_title'  => 'Social Media',
		'menu_slug'   => 'social-media-channels',
		'post_id'     => 'social-media-channels',
		'parent_slug' => 'global-information',
	)
);

// Add function where you want it

/**
* Social Media Menu
*/
if ( ! function_exists( 'slug_social_media_menu' ) ) :
	/**
	* Output social media from ACF
	*
	* @return void
	*/
	function slug_social_media_menu() {
		if ( function_exists( 'acf_add_options_page' ) ) {
			$fb        = get_field( 'facebook_url', 'social-media-channels' );
			$tw        = get_field( 'twitter_url', 'social-media-channels' );
			$goo       = get_field( 'google_mb_url', 'social-media-channels' );
			$linked    = get_field( 'linkedin_url', 'social-media-channels' );
			$yt        = get_field( 'youtube_url', 'social-media-channels' );
			$pinterest = get_field( 'pinterest_url', 'social-media-channels' );
			$insta     = get_field( 'instagram_url', 'social-media-channels' );

			if ( $fb || $tw || $goo || $linked || $yt || $pinterest || $insta ) {
			?>

				<div itemscope itemtype="http://schema.org/Organization">

					<link itemprop="url" href="<?php echo esc_url( home_url( '/' ) ); ?>">

					<ul role="list" class="social-media">

					<?php if ( $fb ) : ?>

						<li class="fb"><a itemprop="sameAs" href="<?php echo esc_url( $fb ); ?>" target="_blank" rel="noopener noreferrer">Find Us On Facebook</a></li>

					<?php endif; ?>

					<?php if ( $tw ) : ?>

						<li class="tw"><a itemprop="sameAs" href="<?php echo esc_url( $tw ); ?>" target="_blank" rel="noopener noreferrer">Follow Us On Twitter</a></li>

					<?php endif; ?>

					<?php if ( $linked ) : ?>

						<li class="linked"><a itemprop="sameAs" href="<?php echo esc_url( $linked ); ?>" target="_blank" rel="noopener noreferrer">Find Us On LinkedIn</a></li>

					<?php endif; ?>

					<?php if ( $goo ) : ?>

						<li class="goo"><a itemprop="sameAs" href="<?php echo esc_url( $goo ); ?>" target="_blank" rel="noopener noreferrer">Find Us Google My Business</a></li>

					<?php endif; ?>

					<?php if ( $insta ) : ?>

						<li class="insta"><a itemprop="sameAs" href="<?php echo esc_url( $insta ); ?>" target="_blank" rel="noopener noreferrer">Find Us On Instagram</a></li>

					<?php endif; ?>

					<?php if ( $yt ) : ?>

						<li class="yt"><a itemprop="sameAs" href="<?php echo esc_url( $yt ); ?>" target="_blank" rel="noopener noreferrer">Watch Us On YouTube</a></li>

					<?php endif; ?>

					<?php if ( $pinterest ) : ?>

						<li class="pin"><a itemprop="sameAs" href="<?php echo esc_url( $pinterest ); ?>" target="_blank" rel="noopener noreferrer">See Us On Pinterest</a></li>

					<?php endif; ?>

					</ul>
				</div>

			<?php
			}
		}
	}
endif;

social-media.scss

/* Social Media */
.social-media {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 2.571em 0 0;
	padding: 0;

	@include respond-to('small') {
		margin: 0;
		justify-content: flex-end;
	}

	li {
		margin-right: 0.25rem;

		&:last-of-type {
			margin-right: 0;
		}
	}

	a {
		display: block;
		text-indent: 110%;
		white-space: nowrap;
		overflow: hidden;
		border-radius: 50%;
		width: 35px;
		height: 35px;
		background-image: url(imgs/sprite-social-media-icons.svg);
		background-size: 100% auto;
		background-repeat: no-repeat;
		border-radius: 50%;
		background-color: $color__brand-2;
		border: 1px solid $color__brand-2;
		outline: 0;
		transition: background-color 0.25s, border-color 0.25s;

		&:hover, &:focus {
			background-color: lighten($color__brand-1, 20%);
			border-color: $color__brand-1;
		}
	}

	.tw a {
		background-position: 0 -32px;
	}

	.linked a {
		background-position: 0 -100px;
	}

	.goo a {
		background-position: 0 -66px;
	}

	.yt a {
		background-position: 0 -132px;
	}

	.pin a {
		background-position: 0 -165px;
	}

	.insta a {
		background-position: 0 -198px;
	}
}

sprite-social-media-icons.svg