How to populate Social Icons into author box on single posts/ Icon

Hi!

I recently added custom code to my functions.php file in order to add an author box to single posts. The author box looks great and all information has populated from my user profile with the exception of the social icons. How can I adjust this code to ensure the social profiles are also added to the author bio? My website is https://www.keianienterprises.com/


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');

The code above produced the results within the attachment below. The default social profiles are google plus, twitter, and facebook but I would also be able to add more profiles to the author box only.

The reason I express author box only is that I do not want the changes to affect my custom author byline.

Also, how do I find all of my posts on my author archives page? Is there an archives page in this stack? This link https://www.keianienterprises.com/author/fantasy would only bring me back to my website’s homepage instead of a page which displays all of the blog posts written by the author.

Hey There,

Thanks for writing in! Your code has a broken and incorrect nested if statement. Please have it updated and use this:

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');

Hope this helps. Please let us know how it goes.

Hi!

I tested your code and it doesn’t work. I just need to have the code adjusted so the social networks can appear in the author box. Is this possible?

Hi there,

Kindly update the wpb_author_info_box function to:

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>';


	}

	function prepare_social() {

		$facebook    = x_get_option( 'x_social_facebook' );
		$twitter     = x_get_option( 'x_social_twitter' );
		$google_plus = x_get_option( 'x_social_googleplus' );
		$linkedin    = x_get_option( 'x_social_linkedin' );
		$xing        = x_get_option( 'x_social_xing' );
		$foursquare  = x_get_option( 'x_social_foursquare' );
		$youtube     = x_get_option( 'x_social_youtube' );
		$vimeo       = x_get_option( 'x_social_vimeo' );
		$instagram   = x_get_option( 'x_social_instagram' );
		$pinterest   = x_get_option( 'x_social_pinterest' );
		$dribbble    = x_get_option( 'x_social_dribbble' );
		$flickr      = x_get_option( 'x_social_flickr' );
		$github      = x_get_option( 'x_social_github' );
		$behance     = x_get_option( 'x_social_behance' );
		$tumblr      = x_get_option( 'x_social_tumblr' );
		$whatsapp    = x_get_option( 'x_social_whatsapp' );
		$soundcloud  = x_get_option( 'x_social_soundcloud' );
		$rss         = x_get_option( 'x_social_rss' );

		$output = '<div class="x-social-global" style="background: #CCC">';

		if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon="" aria-hidden="true"></i></a>'; endif;
		if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;

		$output .= '</div>';


		return $output;

	}

	return $content . prepare_social();
}

That will add icons of the social media which you have set the links in X > Launch > Options > Social.

Please kindly consider that this is considered as a heavy customization and completely outside of our support scope. The styling of the author box will be on your shoulders and we will not be able to implement that for you.

Thank you for your understanding.

The code does not work. I replaced the original code with it and the author box disappears completely. I see in some parts of your code you have removed comments from the original code which causes it to not work at all. Using the original code that I posted… is it possible to use the //Get author’s social profiles $ or something along those lines as a function placed below author’s display name? In other words not omitting or changing items in the original code just adding to it so the social profiles appear.

For example:

// Get author’s biographical information or description
$user_description = get_the_author_meta( ‘user_description’, $post->post_author );

// Author avatar and bio

$author_details .= ‘

’ . get_avatar( get_the_author_meta(‘user_email’) , 90 ) . nl2br( $user_description ). ‘

’;

This portion of the code below for the meta entry in the attached screen shot above which shows the single post title helped pull the social profiles into the byline.

$avatar = ‘’ . get_avatar( get_the_author_meta(‘ID’), 50) . ‘’;

$twitter = '<span><a href="https://twitter.com/fantasy_5" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="&#xf081;" aria-hidden="true"></i></a></span>';
$instagram = '<a href="https://instagram.com/fantasy_5" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="&#xf16d;" aria-hidden="true"></i></a>';
$google_plus = '<span><a href="https://plus.google.com/u/0/+TiffanyClements_5" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="&#xf0d4;" aria-hidden="true"></i></a></span>';

if ( x_does_not_need_entry_meta() ) {
  return;
} else {
  printf( '<p class="p-meta">%1$s%2$s%3$s%4$s%5$s%6$s</p>',
    $date,
    $author,
    $avatar,
    $twitter,
    $instagram,
    $google_plus
  );
}

}
endif;

Hello There,

Please have your custom code your way and add these lines:

$twitter = '<span><a href="https://twitter.com/fantasy_5" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="&#xf081;" aria-hidden="true"></i></a></span>';
$instagram = '<a href="https://instagram.com/fantasy_5" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="&#xf16d;" aria-hidden="true"></i></a>';
$google_plus = '<span><a href="https://plus.google.com/u/0/+TiffanyClements_5" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="&#xf0d4;" aria-hidden="true"></i></a></span>';

printf( '<p class="p-meta">%1$s%2$s%3$s%4$s</p>',
    $avatar,
    $twitter,
    $instagram,
    $google_plus
  );

Please understand that your request is way beyond our scope of support. This has something to do with the customization of the built in elements of the theme. We always refrain from doing so as to avoid any future conflicts and issues that may occur in the site.

Thank you very much for your understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.