Social icons system using Yoast fields in WordPress

social-icons-system-using-yoast-fields-for-wordpress.php

// in functions.php
// example just uses a few of the social fields, plus an email opt-in (created using ACF)

function get_yoast_socials($authorID) {
    // Create HTML variable
    $html = '';
    // Get author ID
    // $author = get_queried_object();
    $author_email = get_the_author_meta('user_email', $authorID);
    // Get author email and option whether or not to display it
    $display_email_link = get_field( "display_email_link", 'user_'.$authorID );
    // Email icon
    $email_icon = '<svg class="social-icon" width="28px" height="28px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 85.57"><title>mail</title><path d="M3.8,0,62.48,47.85,118.65,0ZM0,80.52,41.8,38.61,0,4.53v76ZM46.41,42.37,3.31,85.57h115.9L78,42.37,64.44,53.94h0a3,3,0,0,1-3.78.05L46.41,42.37Zm36.12-3.84,40.35,42.33V4.16L82.53,38.53Z"/></svg>';
    if ($display_email_link) {
        $html .= '<a class="social-link" href="mailto:'.$author_email.'">'.$email_icon.'</a>';
    }
    // Get yoast meta values for social links
    $twitter = get_the_author_meta( 'twitter', $authorID );
    $instagram = get_the_author_meta( 'instagram', $authorID );
    $soundcloud = get_the_author_meta( 'soundcloud', $authorID );
    $twitter_icon = '<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 30 30"><path d="M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65 l7.182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z"></path></svg>';
    $instagram_icon = '<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 64 64"><path d="M 21.580078 7 C 13.541078 7 7 13.544938 7 21.585938 L 7 42.417969 C 7 50.457969 13.544938 57 21.585938 57 L 42.417969 57 C 50.457969 57 57 50.455062 57 42.414062 L 57 21.580078 C 57 13.541078 50.455062 7 42.414062 7 L 21.580078 7 z M 47 15 C 48.104 15 49 15.896 49 17 C 49 18.104 48.104 19 47 19 C 45.896 19 45 18.104 45 17 C 45 15.896 45.896 15 47 15 z M 32 19 C 39.17 19 45 24.83 45 32 C 45 39.17 39.169 45 32 45 C 24.83 45 19 39.169 19 32 C 19 24.831 24.83 19 32 19 z M 32 23 C 27.029 23 23 27.029 23 32 C 23 36.971 27.029 41 32 41 C 36.971 41 41 36.971 41 32 C 41 27.029 36.971 23 32 23 z"></path></svg>';
    $soundcloud_icon = '<svg class="social-icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50"><path d="M 30 11 C 26.398438 11 23 12.789063 21 15.6875 L 21 36 L 42.5 36 C 46.601563 36 50 32.601563 50 28.5 C 50 24.398438 46.601563 21 42.5 21 C 42 21 41.5 21.085938 41 21.1875 C 40.5 15.488281 35.800781 11 30 11 Z M 17 16 C 16.300781 16 15.601563 16.085938 15 16.1875 L 15 36 L 17 36 Z M 18 16 L 18 36 L 20 36 L 20 16.5 C 19.398438 16.300781 18.699219 16.101563 18 16 Z M 14 16.5 C 13.300781 16.800781 12.601563 17.101563 12 17.5 L 12 36 L 14 36 Z M 11 18.3125 C 10.199219 19.011719 9.5 19.90625 9 20.90625 L 9 36 L 11 36 Z M 6.5 22 C 6.324219 22.011719 6.148438 22.042969 6 22.09375 L 6 35.90625 C 6.300781 36.007813 6.699219 36 7 36 L 8 36 L 8 22.09375 C 7.699219 21.992188 7.300781 22 7 22 C 6.851563 22 6.675781 21.988281 6.5 22 Z M 5 22.3125 C 4.300781 22.511719 3.601563 22.8125 3 23.3125 L 3 34.6875 C 3.601563 35.085938 4.300781 35.488281 5 35.6875 Z M 2 24.09375 C 0.800781 25.394531 0 27.101563 0 29 C 0 30.898438 0.800781 32.605469 2 33.90625 Z"></path></svg>';
    // Append HTML with social links
    if ($twitter) {
        $html .= '<a class="social-link" href="https://twitter.com/' . $twitter .'" rel="nofollow" target="_blank">'.$twitter_icon.'</a>';
    }
    if ($instagram) {
        $html .= '<a class="social-link" href="'. $instagram .'" rel="nofollow" target="_blank">'.$instagram_icon.'</a>';
    }
    if ($soundcloud) {
        $html .= '<a class="social-link" href="'. $soundcloud .'" rel="nofollow" target="_blank">'.$soundcloud_icon.'</a>';
    }
    if ($twitter || $instagram || $soundcloud || $display_email_link) {
        $html = '<div class="yoast-social-links">'.$html.'</div>';        
    }

    return $html;
}

// example of function used in display in an article footer
// set up to support Co-authors Plus
$coauthors = get_coauthors($post_ID); 
$coauthors_display = false;
$coauthors_content = '';
foreach($coauthors as $coauthor) {
    $coauthor_socials = get_yoast_socials($coauthor->ID);
    // only if there's a bio, or socials, do the rest
    if ( $coauthor->description || $coauthor_socials ) {
        $coauthors_display = true;
        $coauthors_content .= '<div class="post-footer-author-meta">';
        $archive_link = get_author_posts_url( $coauthor->ID, $coauthor->user_nicename );
        $coauthors_content .= '<span class="author-name"><a href="'.$archive_link.'">'.$coauthor->display_name.'</a></span>';
        $coauthors_content .= get_yoast_socials($coauthor->ID);
        $coauthors_content .= '<span class="author-bio">'.$coauthor->description.'</span>';
        $coauthors_content .= '</div>';
    }
}
if ($coauthors_display == true) {
    echo '<div class="post-footer-meta">';  
    echo $coauthors_content;
    echo '</div>';
}