Hey Ben, I recently made a TikTok account for my brand, and I want to add a TikTok link. I tried this same method above, but the TikTok icon isn’t appearing. I checked, and there is a TikTok icon in FontAwesome. Any help would be appreciated!
Here’s some relevant code:
function ct_period_social_array() {
$social_sites = array(
'twitter' => 'period_twitter_profile',
'facebook' => 'period_facebook_profile',
'instagram' => 'period_instagram_profile',
'linkedin' => 'period_linkedin_profile',
'pinterest' => 'period_pinterest_profile',
'youtube' => 'period_youtube_profile',
'rss' => 'period_rss_profile',
'email' => 'period_email_profile',
'phone' => 'period_phone_profile',
'email-form' => 'period_email_form_profile',
'amazon' => 'period_amazon_profile',
'artstation' => 'period_artstation_profile',
'bandcamp' => 'period_bandcamp_profile',
'behance' => 'period_behance_profile',
'bitbucket' => 'period_bitbucket_profile',
'codepen' => 'period_codepen_profile',
'delicious' => 'period_delicious_profile',
'deviantart' => 'period_deviantart_profile',
'diaspora' => 'period_diaspora_profile',
'digg' => 'period_digg_profile',
'discord' => 'period_discord_profile',
'dribbble' => 'period_dribbble_profile',
'etsy' => 'period_etsy_profile',
'flickr' => 'period_flickr_profile',
'foursquare' => 'period_foursquare_profile',
'github' => 'period_github_profile',
'goodreads' => 'period_goodreads_profile',
'google-wallet' => 'period_google_wallet_profile',
'hacker-news' => 'period_hacker-news_profile',
'imdb' => 'period_imdb_profile',
'link' => 'period_link_profile',
'mastodon' => 'period_mastodon_profile',
'medium' => 'period_medium_profile',
'meetup' => 'period_meetup_profile',
'mixcloud' => 'period_mixcloud_profile',
'ok-ru' => 'period_ok_ru_profile',
'orcid' => 'period_orcid_profile',
'patreon' => 'period_patreon_profile',
'paypal' => 'period_paypal_profile',
'pocket' => 'period_pocket_profile',
'podcast' => 'period_podcast_profile',
'qq' => 'period_qq_profile',
'quora' => 'period_quora_profile',
'ravelry' => 'period_ravelry_profile',
'reddit' => 'period_reddit_profile',
'researchgate' => 'period_researchgate_profile',
'skype' => 'period_skype_profile',
'slack' => 'period_slack_profile',
'slideshare' => 'period_slideshare_profile',
'soundcloud' => 'period_soundcloud_profile',
'spotify' => 'period_spotify_profile',
'snapchat' => 'period_snapchat_profile',
'stack-overflow' => 'period_stack_overflow_profile',
'steam' => 'period_steam_profile',
'strava' => 'period_strava_profile',
'stumbleupon' => 'period_stumbleupon_profile',
'telegram' => 'period_telegram_profile',
'tencent-weibo' => 'period_tencent_weibo_profile',
'TikTok' => 'period_tiktok_profile',
'tumblr' => 'period_tumblr_profile',
'twitch' => 'period_twitch_profile',
'untappd' => 'period_untappd_profile',
'vimeo' => 'period_vimeo_profile',
'vine' => 'period_vine_profile',
'vk' => 'period_vk_profile',
'wechat' => 'period_wechat_profile',
'weibo' => 'period_weibo_profile',
'whatsapp' => 'period_whatsapp_profile',
'xing' => 'period_xing_profile',
'yahoo' => 'period_yahoo_profile',
'yelp' => 'period_yelp_profile',
'500px' => 'period_500px_profile',
'social_icon_custom_1' => 'social_icon_custom_1_profile',
'social_icon_custom_2' => 'social_icon_custom_2_profile',
'social_icon_custom_3' => 'social_icon_custom_3_profile'
);
return apply_filters( 'ct_period_social_array_filter', $social_sites );
}
/* Gets the link icon */
function ct_period_social_icons_output() {
// Get the social icons array
$social_sites = ct_period_social_array();
// Store only icons with URLs saved
$saved = array();
/* Store the site name and ID if saved
/* name: twitter
/* id: period_twitter_profile */
foreach ( $social_sites as $name => $id ) {
if ( strlen( get_theme_mod( $name ) ) > 0 ) {
$saved[ $name ] = $id;
}
}
// If there are any social profiles saved
if ( !empty( $saved ) ) {
echo "<ul class='social-media-icons'>";
// Output list item for every saved profile
foreach ( $saved as $name => $id ) {
if ( $name == 'rss' ) {
$class = 'fas fa-rss';
} elseif ( $name == 'email' ) {
$class = 'fas fa-envelope';
} elseif ( $name == 'email-form' ) {
$class = 'far fa-envelope';
} elseif ( $name == 'podcast' ) {
$class = 'fas fa-podcast';
} elseif ( $name == 'ok-ru' ) {
$class = 'fab fa-odnoklassniki';
} elseif ( $name == 'wechat' ) {
$class = 'fab fa-weixin';
} elseif ( $name == 'pocket' ) {
$class = 'fab fa-get-pocket';
} elseif ( $name == 'phone' ) {
$class = 'fas fa-phone';
} elseif ( $name == 'link' ) {
$class = 'fas fa-link';
} elseif ( $name == 'TikTok' ) {
$class = 'fab fa-tiktok';
} else {
$class = 'fab fa-' . $name;
}
$url = get_theme_mod( $name );
$title = $name;
// Escape the URL based on protocol being used
if ( $name == 'email' ) {
$href = 'mailto:' . antispambot( is_email( $url ) );
$title = antispambot( is_email( $url ) );
} elseif ( $name == 'skype' ) {
$href = esc_url( $url, array( 'http', 'https', 'skype' ) );
} elseif ( $name == 'phone' ) {
$href = esc_url( $url, array( 'tel' ) );
$title = esc_url( $url, array( 'tel' ) );
} else {
$href = esc_url( $url );
}
// Output the icon
if ( $name == 'social_icon_custom_1' || $name == 'social_icon_custom_2' || $name == 'social_icon_custom_3' ) { ?>
<li>
<a class="custom-icon" target="_blank" href="<?php echo $href; ?>">
<img class="icon" src="<?php echo esc_url(get_theme_mod($name .'_image')); ?>" style="width: <?php echo absint(get_theme_mod($name . '_size', '20')); ?>px;" />
<span class="screen-reader-text"><?php echo esc_html( get_theme_mod($name . '_name') ); ?></span>
</a>
</li>
<?php
} else { ?>
<li>
<a class="<?php echo esc_attr( $name ); ?>" target="_blank" href="<?php echo $href; ?>">
<i class="<?php echo esc_attr( $class ); ?>" aria-hidden="true" title="<?php echo esc_attr( $title ); ?>"></i>
<span class="screen-reader-text"><?php echo esc_html( $title ); ?></span>
</a>
</li>
<?php
}
}
echo "</ul>";
}
}
