Skip to content

Instantly share code, notes, and snippets.

@moxdev

moxdev/social-media.php

Last active March 6, 2019 14:58
Show Gist options
  • Save moxdev/9b1e8c5e5e536a24d5650778ca96621b to your computer and use it in GitHub Desktop.
Save moxdev/9b1e8c5e5e536a24d5650778ca96621b to your computer and use it in GitHub Desktop.
Download ZIP
ACF Social Media List #wp #acf
Raw
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;
Raw
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;
}
}
Display the source blob
Display the rendered blob
Raw
sprite-social-media-icons.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="50px" height="350px" viewBox="0 0 50 350" style="enable-background:new 0 0 50 350;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#FFFFFF;}
</style>
<rect class="st0" width="50" height="50"/>
<g>
<path class="st1" d="M26.8,37.4V25.9h3.8l0.6-4.4h-4.4v-2.8c0-1.3,0.4-2.1,2.2-2.1h2.4v-4c-0.4-0.1-1.8-0.1-3.4-0.1
c-3.4,0-5.7,2.1-5.7,5.9v3.3h-3.8v4.4h3.8v11.4L26.8,37.4L26.8,37.4z"/>
</g>
<rect y="50" class="st0" width="50" height="50"/>
<g>
<path class="st1" d="M12.5,82.8c0,0-0.2,0,0.9,0.7s3.9,1.6,6.8,1.6c9.5,0,14.7-7.9,14.7-14.7c0-0.2,0-0.4,0-0.6c0,0,0-0.1,0.5-0.5
s1.4-1.3,2.1-2.3c-0.9,0.4-1.9,0.7-3,0.8c1.1-0.6,1.9-1.7,2.3-2.9c-1,0.6-2.1,1-3.3,1.3c-0.9-1-2.3-1.6-3.8-1.6
c-2.9,0-5.2,2.3-5.2,5.2c0,0.4,0,0.8,0.1,1.2c-4.3-0.2-8.1-2.3-10.6-5.4c-0.4,0.8-0.7,1.6-0.7,2.6c0,1.8,0.9,3.4,2.3,4.3
c-0.8,0-1.6-0.3-2.3-0.6l0,0c0,2.5,1.8,4.6,3,4.8c0,0,1.2,0.2,1,0.3c-0.2,0.1-0.7,0.1-1.1,0.1c-0.3,0-0.7,0-0.8-0.1
c0,0-0.2,0,0.2,1c0.3,1,2.2,2.5,3.4,2.5c0,0,1.1,0,0.2,0.7c-1.1,0.9-3.3,1.7-5.7,1.7C13.1,82.9,12.7,82.9,12.5,82.8"/>
</g>
<rect y="100" class="st0" width="50" height="50"/>
<rect y="150" class="st0" width="50" height="50"/>
<g>
<path class="st1" d="M31.3,170.4c-2.5,0-4.2,1.4-4.9,2.7h-0.1v-2.3h-5v16.7h5.2v-8.3c0-2.2,0.4-4.3,3.1-4.3s2.7,2.5,2.7,4.4v8.1
h5.2v-9.2C37.5,173.8,36.6,170.4,31.3,170.4z"/>
<circle class="st1" cx="15.5" cy="165.5" r="3"/>
<rect x="12.9" y="170.8" class="st1" width="5.2" height="16.7"/>
</g>
<rect y="200" class="st0" width="50" height="50"/>
<path class="st1" d="M37.2,220c0,0-0.3-1.8-1-2.5c-0.9-1-2-1-2.5-1.1c-3.5-0.3-8.8-0.3-8.8-0.3s-5.2,0-8.8,0.3
c-0.4,0.1-1.6,0.1-2.5,1.1c-0.7,0.7-1,2.5-1,2.5s-0.3,2-0.3,4v1.9c0,2,0.3,4,0.3,4s0.3,1.8,1,2.5c0.9,1,2.2,0.9,2.8,1.1
c2,0.2,8.5,0.3,8.5,0.3s5.2,0,8.8-0.3c0.4-0.1,1.6-0.1,2.5-1.1c0.7-0.7,1-2.5,1-2.5s0.3-2,0.3-4v-1.8C37.4,222.1,37.2,220,37.2,220z
M22.4,228.4v-7.1l6.8,3.5L22.4,228.4z"/>
<rect y="250" class="st0" width="50" height="50"/>
<g>
<path class="st1" d="M25,262.5c-6.8,0-12.4,5.6-12.4,12.4c0,5.1,3,9.4,7.4,11.3c-0.1-0.9,0-2,0.2-2.8c0.3-1,1.6-6.7,1.6-6.7
s-0.4-0.8-0.4-2c0-1.9,1.1-3.2,2.4-3.2c1.2,0,1.7,0.9,1.7,1.9c0,1.2-0.7,2.8-1.2,4.4c-0.4,1.3,0.7,2.4,2,2.4c2.4,0,3.9-3,3.9-6.6
c0-2.7-1.9-4.8-5.1-4.8c-3.8,0-6.1,2.8-6.1,5.9c0,1.1,0.4,1.9,0.8,2.4c0.3,0.3,0.3,0.4,0.2,0.7c-0.1,0.3-0.2,0.8-0.3,1
c-0.1,0.4-0.4,0.4-0.6,0.4c-1.8-0.7-2.6-2.6-2.6-4.7c0-3.5,3-7.8,8.9-7.8c4.7,0,7.9,3.5,7.9,7.2c0,4.9-2.7,8.5-6.7,8.5
c-1.3,0-2.6-0.7-3-1.6c0,0-0.7,2.8-0.9,3.5c-0.3,1-0.8,2-1.2,2.7c1.2,0.4,2.3,0.5,3.5,0.5c6.8,0,12.4-5.6,12.4-12.4
C37.5,268.1,31.9,262.5,25,262.5z"/>
</g>
<rect y="300" class="st0" width="50" height="50"/>
<g>
<path class="st1" d="M25,314.7c3.3,0,3.7,0,5.1,0.1c1.2,0.1,1.9,0.3,2.3,0.4c0.6,0.3,1,0.5,1.5,0.9c0.4,0.4,0.7,0.9,0.9,1.5
c0.2,0.4,0.3,1.1,0.4,2.3c0.1,1.3,0.1,1.7,0.1,5.1s0,3.7-0.1,5.1c-0.1,1.2-0.3,1.9-0.4,2.3c-0.3,0.6-0.5,1-0.9,1.5
c-0.4,0.4-0.9,0.7-1.5,0.9c-0.4,0.2-1.1,0.3-2.3,0.4c-1.3,0.1-1.7,0.1-5.1,0.1s-3.7,0-5.1-0.1c-1.2-0.1-1.9-0.3-2.3-0.4
c-0.6-0.3-1-0.5-1.5-0.9c-0.4-0.4-0.7-0.9-0.9-1.5c-0.2-0.4-0.3-1.1-0.4-2.3c-0.1-1.3-0.1-1.7-0.1-5.1s0-3.7,0.1-5.1
c0.1-1.2,0.3-1.9,0.4-2.3c0.3-0.6,0.5-1,0.9-1.5c0.4-0.4,0.9-0.7,1.5-0.9c0.4-0.2,1.1-0.3,2.3-0.4C21.2,314.7,21.6,314.7,25,314.7
M25,312.5c-3.4,0-3.8,0-5.1,0.1c-1.3,0.1-2.2,0.3-3.1,0.6c-0.8,0.3-1.5,0.8-2.1,1.5c-0.7,0.7-1.1,1.4-1.5,2.1
c-0.3,0.8-0.5,1.7-0.6,3.1s-0.1,1.8-0.1,5.2s0,3.8,0.1,5.1s0.3,2.2,0.6,3.1s0.8,1.5,1.5,2.1c0.7,0.7,1.4,1.1,2.1,1.5
c0.8,0.3,1.7,0.5,3.1,0.6c1.3,0.1,1.7,0.1,5.1,0.1s3.8,0,5.1-0.1c1.3-0.1,2.2-0.3,3.1-0.6c0.8-0.3,1.5-0.8,2.1-1.5
c0.7-0.7,1.1-1.4,1.5-2.1c0.3-0.8,0.5-1.7,0.6-3.1c0.1-1.3,0.1-1.7,0.1-5.1s0-3.8-0.1-5.1c-0.1-1.3-0.3-2.2-0.6-3.1
c-0.3-0.8-0.8-1.5-1.5-2.1s-1.4-1.1-2.1-1.5c-0.8-0.3-1.7-0.5-3.1-0.6C28.8,312.5,28.4,312.5,25,312.5L25,312.5z"/>
<path class="st1" d="M25,318.6c-3.5,0-6.4,2.8-6.4,6.4s2.8,6.4,6.4,6.4s6.4-2.8,6.4-6.4S28.5,318.6,25,318.6z M25,329.1
c-2.3,0-4.2-1.9-4.2-4.2s1.9-4.2,4.2-4.2s4.2,1.9,4.2,4.2C29.1,327.2,27.3,329.1,25,329.1z"/>
<circle class="st1" cx="31.6" cy="318.3" r="1.5"/>
</g>
<g>
<path class="st1" d="M30.9,130v1.6h1.8c-0.3,0.7-1,1.2-1.8,1.2c-1.1,0-2-0.9-2-2s0.9-2,2-2c0.5,0,1,0.2,1.4,0.6l1.1-1.1
c-0.6-0.6-1.5-1-2.5-1c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5c1.9,0,3.5-1.6,3.5-3.5c0-0.4-0.1-0.8-0.1-0.8H30.9z"/>
<path class="st1" d="M37.5,122.3L37.5,122.3l-2-6.6c-0.2-0.8-0.6-1.4-1.2-1.5c-1.4,0-2.8,0-4.2,0c0.1,0.4,0.1,0.8,0.2,1.2l-0.2-1.2
H25c-1.8,0-5.5,0-5.5,0h-3.9c-0.6,0.2-1,0.8-1.2,1.5l-1.9,6.6H14l0,0h-1.5c0,1.1,0.6,2.1,1.5,2.7v10c0,0.5,0.4,0.9,0.9,0.9H35
c0.5,0,0.9-0.4,0.9-0.9v-10C36.9,124.4,37.5,123.4,37.5,122.3z M18.8,122.3L18.8,122.3H25l0,0H18.8z M14.4,122.3h3.5H14.4
L14.4,122.3z M35.6,134.9c0,0.3-0.2,0.6-0.6,0.6H15c-0.3,0-0.6-0.2-0.6-0.6v-9.8c0.4,0.2,0.8,0.2,1.2,0.2c1.7,0,3.2-1.4,3.2-3.1
l0,0l0,0c0,1.7,1.4,3.1,3.1,3.1s3.1-1.4,3.1-3.1l0,0c0,1.7,1.4,3.1,3.1,3.1s3.1-1.4,3.1-3.1c0,1.7,1.4,3.1,3.1,3.1
c0.4,0,0.8-0.1,1.2-0.2L35.6,134.9L35.6,134.9z"/>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment