How to Add Social Network Icons to Author Bio/ Single Posts

  • Resolved fantasy_5

    (@fantasy_5)


    6 years, 7 months ago

    Hi!

    I created an author bio form for single posts pages via code because I did not want to use a plugin. This code is added to my functions.php file and created the screenshot below. How do I edit it so that the social networks in my user profile automatically populate into the form?

    function wpb_author_info_box( $content ) {
 
global $post;
 
// Detect if it is a single post with a post author
if ( is_single() && isset( $post->post_author ) ) {
 
// Get author's display name 
$display_name = get_the_author_meta( 'display_name', $post->post_author );
 
// If display name is not available then use nickname as display name
if ( empty( $display_name ) )
$display_name = get_the_author_meta( 'nickname', $post->post_author );
 
// Get author's biographical information or description
$user_description = get_the_author_meta( 'user_description', $post->post_author );
 
// Get author's website URL 
$user_website = get_the_author_meta('url', $post->post_author);
 
// Get link to the author archive page
$user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author));

  
if ( ! empty( $display_name ) )
 
$author_details = '<p class="author_name">About ' . $display_name . '</p>';
 
if ( ! empty( $user_description ) )
// Author avatar and bio
 
$author_details .= '<p class="author_details">' . get_avatar( get_the_author_meta('user_email') , 90 ) . nl2br( $user_description ). '</p>';
 
$author_details .= '<p class="author_links"><a href="'. $user_posts .'">View all posts by ' . $display_name . '</a>';  
 
// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {
 
// Display author website link
$author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></p>';
 
} else { 
// if there is no author website then just close the paragraph
$author_details .= '</p>';
}
 
// Pass all this info to post content  
$content = $content . '<footer class="author_bio_section" >' . $author_details . '</footer>';
}
return $content;
}
 
// Add our function to the post content filter 
add_action( 'the_content', 'wpb_author_info_box' );
 
// Allow HTML in author bio section 
remove_filter('pre_user_description', 'wp_filter_kses');

    I would like for the icons to appear inline like this ********** to the right of the word website.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • I tweaked the one I have and came up with the example below. It works in my test server so you may try. 

    
      $twitterHandle = get_the_author_meta('twitter',get_the_author_meta('ID'));
      $facebookHandle = get_the_author_meta('facebook', get_the_author_meta('ID'));
      $content .= '<span id="author-social">Follow on: ' .'<a id="author-social-handle" href="https://twitter.com/' . $twitterHandle .'" rel="nofollow" target="_blank">Twitter</a> | <a id="author-social-handle" href="'. $facebookHandle .'" rel="nofollow" target="_blank">Facebook</a> .'</span>';

    As you can see, I’m using the text for my social name and not icon. If you prefer to use the icon, you should remove the social name between “a” tag and have different id for Twitter or Facebook, like in the example:

    Instead of:

    id="author-social-handle"

    Have something like these:

    id="author-social-twitter-handle"

id="author-social-facebook-handle"

    And control the icon look using ::before selector.

    #author-social-twitter-handle a:before {
    content: "\f081";
    display: inline-block;
    color: #c4a284;
    font-family: FontAwesome;
    font-size: 10pt;
    font-weight: normal;
    line-height: 1;
    margin-right: 5px;
    vertical-align: inherit;
}

    If your theme supports FontAwesome, you can do that. FontAwesome has different styles for social media icons so check their site, to see how the icons look like.

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi!

    Thanks for your reply. So how do I edit my code and add what you have created to it so that it works properly when added to my functions file? Yes, I will use font awesome icons instead of links.

    Check this function file: https://gist.github.com/poetsgig/92b819ccfd6d9423875d646d4ae3652c

    Your old code has <p> tag for “author links” which I changed to span to display the elements inline:

    $author_details .= '<span class="author_links"><a href="'. $user_posts .'">View all posts by ' . $display_name . '</a>';  
 
// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {
 
// Display author website link
$author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></p>';
 
} else { 
// if there is no author website then just close the paragraph
$author_details .= '</span>';
}

    Then I inserted the social links before passing the last $author_details to $content:

    
// Insert author social contact

      $twitterHandle = get_the_author_meta('twitter',get_the_author_meta('ID'));
      $facebookHandle = get_the_author_meta('facebook', get_the_author_meta('ID'));
	  
if ( !empty ($twitterHandle) ) { 
$author_details .= '<span>' . '| <a id="author-social-handle" href="https://twitter.com/' . $twitterHandle .'" rel="nofollow" target="_blank"><i class="fa  fa-twitter"></i></a>'; 
} else {
$author_details .= '</span>';
}

if ( !empty ($facebookHandle) ) { 
$author_details .= '<span>' . '| <a id="author-social-handle" href="'. $facebookHandle .'" rel="nofollow" target="_blank"><i class="fa  fa-facebook-f"></i></a>';
} else {
$author_details .= '</span>';
}

    Instead of the ::before selector which I previously mentioned, here I use the Font Awesome links, which give you also the icons.

    <i class=”fa fa-twitter”></i>
    <i class=”fa fa-facebook-f”></i>

    Then, use CSS to style:

    #author-social-handle {
    color: #8c2629;
}
#author-social-handle .fa {  /* social icon - FontAwesome */
   line-height: 1.2em;
   text-shadow: none;
   width: 15.6px;
}
.author a#author-social-handle,
.author a#author-social-handle:visited { 
   background: #fff;
   color: #c4a284;
   font-size: 16px;
   margin: 0 3px;
   padding: 6px;
   text-align: center;
}
.author a#author-social-handle:hover { 
   background: #fff;
   color: #8c2629;
}

    Hope this helps.

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Bigacelloy!

    Thanks so much for all of your help. That did the trick. One last thing… how do I get the social icons to appear along the same line with

    View all posts by Fantasy | Website (I want the icons to appear here inline)

    | | | | | | | | (instead of here on a separate line)

    Hello, fantasy_5!

    Can you try the code below? Upon inspection, there is an end paragraph tag that is not supposed to be there (where the website link code is). Replace it with span. As in:

    // Display author website link
$author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></span>';
 
} else { 
// if there is no author website then just close the span
$author_details .= '</span>';
}
    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Bigacelloy!

    That did the trick. You are one smart cookie. ?? Many thanks & kind regards.

    You’re welcome! ??

    Thread Starter fantasy_5

    (@fantasy_5)

    Hello!

    One more thing… If I want to make the social icons a bit larger, change the color, and put a bit more space between them which portion of the code would I tweak?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to Add Social Network Icons to Author Bio/ Single Posts’ is closed to new replies.