iBlognet

Thesis Author Box With Social Media Profiles Without Plugin

by Editor

Thesis Author Box With Social Media Profiles Without Any Plugin Since I migrated from Blogger to WordPress , I’ve been playing around with WordPress and Thesis Theme a lot. If you’re a regular reader of my blog, you might have also noticed some changes to my current theme. Previously iBlognet was built on Thesis Page Framework and now it’s designed on Thesis Full-width Framework .

The theme is completely custom-coded by myself. So you can see the Custom Author info box with link to social media profiles without using any plugin. You can add a similar Thesis Author Box with Social Media Profiles to your blog. Just follow the tutorial below:

Step1: Adding Custom Fields To WordPress

Copy Paste the following code in your custom-functions-php

[php]
/* CUSTOM PROFILE FIELDS */
function show_extra_profile_fields( $user ) { ?>
<h3>Social Media Profiles</h3>
<table class=”form-table”>
<tr>
<th><label for=”google”>Google Authorship</label></th>
<td><input type=”text” name=”googlelink” id=”googlelink” value=”<?php echo esc_attr( get_the_author_meta( ‘googlelink’, $user->ID ) ); ?>” class=”regular-text” /><br /><span class=”description”>Please enter your Google Plus Profile ID.</span></td>
<td><input type=”text” name=”googlename” id=”googlename” value=”<?php echo esc_attr( get_the_author_meta( ‘googlename’, $user->ID ) ); ?>” class=”regular-text” /><br /><span class=”description”>Please enter your Google Plus Profile Name.</span></td>
</tr>
<tr>
<th><label for=”twitter”>Twitter</label></th>
<td><input type=”text” name=”twitter” id=”twitter” value=”<?php echo esc_attr( get_the_author_meta( ‘twitter’, $user->ID ) ); ?>” class=”regular-text” /><br /><span class=”description”>Please enter your Twitter username.</span></td>
</tr>
<tr>
<th><label for=”facebook”>Facebook Profile</label></th>
<td><input type=”text” name=”facebook” id=”twitter” value=”<?php echo esc_attr( get_the_author_meta( ‘facebook’, $user->ID ) ); ?>” class=”regular-text” /><br /><span class=”description”>Please enter your Facebook Profile URL.</span></td>
</tr>
</table>
<?php }
add_action( ‘show_user_profile’, ‘show_extra_profile_fields’ );
add_action( ‘edit_user_profile’, ‘show_extra_profile_fields’ );
/* CUSTOM PROFILE FIELDS BY iBLOGNET */
function save_extra_profile_fields( $user_id ) {
if ( !current_user_can( ‘edit_user’, $user_id ) )
return false;
/* Copy and paste this line for additional fields. */
update_usermeta( $user_id, ‘googlename’, $_POST[‘googlename’] );
update_usermeta( $user_id, ‘googlelink’, $_POST[‘googlelink’] );
update_usermeta( $user_id, ‘twitter’, $_POST[‘twitter’] );
update_usermeta( $user_id, ‘facebook’, $_POST[‘facebook’] );
}
add_action( ‘personal_options_update’, ‘save_extra_profile_fields’ );
add_action( ‘edit_user_profile_update’, ‘save_extra_profile_fields’ );
[/php]

Code Explanation:

  • Line 3: Add a custom title to social media fields section in WordPress.
  • Line 6 to Line 8: Add custom fields for Google Plus Profile ID and Profile Name.
  • Line 11 to Line 12: Add custom fields for Twitter username.
  • Line 15 to Line 16: Add custom fields for Facebook profiles.
  • Line 27 to Line 30: Saves the field when user enters the information.

The above code will add Social Media Profile Fields  in WordPress like in the image below. If you want you can add other social media profiles too. Just be sure to add unique ID’s for those fields.

Custom-Social-Media-Profile-Fields

Step 2: Adding Author Box With Social Media Profiles.

Copy Paste the following code in custom-functions.php

[php]
/* AUTHOR INFO BOX */
function post_footer_author() {
if (is_single())
{ ?>
<div id=”postauthor”>
<div class=”author-info”>
<?php echo get_avatar( get_the_author_id() , 80 ); ?>
<h4>Article by » <?php the_author_posts_link(); ?></h4>
<br><p><i><?php the_author_description(); ?></i></p></br>
<p><b><?php the_author_firstname(); ?> has written <span><?php the_author_posts(); ?></span> articles on iBlognet</b></p></br>
<p><b>Author Connect »
<?php if ( get_the_author_meta( ‘twitter’ ) ) { ?>
<a href=”http://twitter.com/<?php the_author_meta( ‘twitter’ ); ?>” title=”Follow <?php the_author_meta( ‘display_name’ ); ?> on Twitter”>Twitter</a> |
<?php }
?>
<?php if ( get_the_author_meta( ‘googlename’ ) ) { ?>
<a href=”http://plus.google.com/<?php the_author_meta( ‘googlelink’ ); ?>” title=”Follow <?php the_author_meta( ‘display_name’ ); ?> on Google+” rel=”author”>+<?php the_author_meta( ‘googlename’ ); ?></a> |
<?php }
?>
<?php if ( get_the_author_meta( ‘facebook’ ) ) { ?>
<a href=”<?php the_author_meta( ‘facebook’ ); ?>” title=”Follow <?php the_author_meta( ‘display_name’ ); ?> on Facebook”>Facebook</a> |
<?php }
?>
</b></p>
</div>
<div style=”clear:both;”></div>
</div>
<?php }
}
add_action(‘thesis_hook_after_post_box’, ‘post_footer_author’);
[/php]

Code Explanation:

  • Line 7: Adds the author gravatar size of 80. You can change it as per your requirement.
  • Line 8: Adds author name with link to author archive.
  • Line 9: Adds author description.
  • Line 10: Shows the number of post by author.
  • Line 11 to Line 24: Adds author social Media Profiles.

Copy Paste the following code in custom.css

[css]

/* AUTHOR INFO BOX CSS BY iBLOGNET */
#postauthor { background: #E6E6E6; border: 1px solid #CCC; padding:2em; margin:15px 0;}
.author-info{float:left; width:100%; padding:0 15px 0 0;}
.author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px; padding:3px;}
.author-info h4 { color: #666; font-size: 15px; }
.author-info h5 {color:#666; text-transform:none; font-size:12px; letter-spacing:0;}
.author-info p { color: #515151; font-size: 12px; line-height:16px;}

[/css]

You can customize the CSS as per your requirement.

The above 2 codes will give you Thesis Author Profile box as in the image below:

Thesis-Author-Box

That’s it! You’re done in two simple steps! The author box also links to Google+. This might be easier to verify Google authorship, if your blog have multiple authors. If you have any problem in following any of the above steps, then just leave a comment below or contact me through the contact form .

If you don’t have Thesis Theme, you can buy Thesis Theme right now!

Also Read: About Author Widget For Bloggers Similar To WordPress

Article by »


Admin and Editor of iBlognet iBlognet has written 294 fantastic article(s) on iBlognet.


Author Connect »

1 Raaj Trambadia

Sahil – Amazing! Thanks so much for the tutorial brother! Cheers. Works great!

Is there any way I can add – Author Website/Blog to the box?

Thanks

2 Todd Restrepo

Hi,

First off, thanks for the code, I would never had tried anything like this but it worked and I love it.

I just have one small issue that is not affecting how things work but it’s one of those things that will annoy me every time I look at it. The form fields do not line up in my user profile admin section, I will paste it below. I did add the linkedIn field but I had the same problem before adding that and I know it’s something simple but as I said I never play around with coding but I have today : )

Once again, thanks for the code that is really nice of you.

Google Authorship
Please enter your Google Plus Profile ID.
Please enter your Google Plus Profile Name. Twitter
Please enter your Twitter username. Facebook Profile
Please enter your Facebook Profile URL. LinkedIn Profile
Please enter your linkedIn Profile URL.

3 Brad

Is there any way to exclude the author box from showing up in certain categories? Thanks!

Comments on this entry are closed.

Previous post:

Next post: