Multi-Author blogs are becoming increasingly popular and with good reason. Creating regular, engaging content can often be a challenge for an individual blogger. With multiple authors it can be a lot easier and also allows you to cover a greater range of topics pulling from the knowledge of several people. On sites like Wptuts+ you get to read articles from a massive team of writers and bloggers, we all have our own writing style and personalities. Like Wptuts+, on most multi-author sites, you will find a nice little author information box somewhere on the page. Today I'm going to show you how you can create one for your very own site.
WordPress is a ready made multi-author blogging and content platform. All the tools we need are built in we just need to know how to use them.
It All Starts With a Profile
Hidden away on the WordPress admin bar (when logged in) all users have access to the "Edit My Profile" link. It takes you to the page where you set how your name is displayed on the site, it's where you change your password and email address. It's also the place where you can enter really useful, modern and current contact information such as AIM, Yahoo IM and Google Talk details (/sarcasm). I know, because I do the same, you've always ignored most of it. If you don't use these fields then why fill them in? Our author box is going to use these fields and we are going to make them a little bit more useful!
Extra Fields
It is very easy for us to remove the contact methods we don't want to use and replace them with something a little more current. So first things first you need to open up your theme's functions.php (or stick this in a plugin if your prefer) and let's get to work.
function wptuts_contact_methods( $contactmethods ) {
// Remove we what we don't want
unset( $contactmethods[ 'aim' ] );
unset( $contactmethods[ 'yim' ] );
unset( $contactmethods[ 'jabber' ] );
// Add some useful ones
$contactmethods[ 'twitter' ] = 'Twitter Username';
$contactmethods[ 'facebook' ] = 'Facebook Profile URL';
$contactmethods[ 'linkedin' ] = 'LinkedIn Public Profile URL';
$contactmethods[ 'googleplus' ] = 'Google+ Profile URL';
return $contactmethods;
}
add_filter( 'user_contactmethods', 'wptuts_contact_methods' );
So first thing we are doing is removing some fairly useless fields, next we simply add the additional fields we want. The first part needs to be unique for the text you can enter whatever you like as this is what will be displayed next to the field on the profile page.
If you revisit your edit profile page you should now see your additional fields have appeared and the useless ones have disappeared.
Now we have somewhere we can store our additional information we can move on to working with the data and how we can show it in the front end of our site.
Show Yourself Off
So we want to show a picture of our author, a little description / bio and some links to social media sites.
WordPress handles user profile pics using Gravatar. We want to use the WordPress Function get_avatar() this retrieves the Gravatar for the specified user ID or email address.
<?php echo get_avatar( $id_or_email, $size, $default, $alt ); ?>
You can specify the size of the image and also what to do if the user doesn't have a Gravatar. The final parameter allows you to set the Alternate text for the avatar. For now we are going to use the following code:
<?php echo get_avatar( get_the_author_meta( 'ID' ), '70' );?>
This pulls in the Gravatar at 70px x 70px and uses the user ID of the author for the current post.
We also want to pull some of the basic user profile information through like the user's display name and description. Let's have a look at a basic example.
The Basics
<div class="media profile"> <?php echo get_avatar( get_the_author_meta( 'ID' ), '70' ); ?> <div class="bd"> <h4><?php printf( esc_attr__( 'About %s', 'tuts_plus' ), get_the_author() );?></h4> <p><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p> <div class="profile-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"> <?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'tuts_plus' ), get_the_author() ); ?> </a> </div> </div> </div>
The above code gives a nice starting point. Open up your single.php (I am using Twenty Twelve for the purposes of this article) and paste in the above code inside the loop but above your comments template. (Line 25 if you are using Twenty Twelve as well.) Now let's go through what we're doing.
We've already talked about the get_avatar() function but further down you will see the get_the_author() function. This simply retrieves the post author. In our example we print the author's name at the top of our author box. It will display whatever the user has selected as their "Display name publicly as". You could simply use:
<h4><?php echo get_the_author(); ?></h4>
However I prefer to escape all my output and allow the option for translators.
Next we see get_the_author_meta(). We're going to be using this quite a bit. This function returns the desired meta data for the given user. If we use it within a loop we don't need to specify the user ID however it can be used outside of the loop by passing the user ID. Using this function you can get a range of information, in the above example we are using it to pull the description which is the biography box you can complete on the user profile page. As with the author name I'm escaping the output to make sure our authors haven't hidden any nasties!
Finally we have a link at the bottom which links through to our author page. We use the get_author_posts_url() function to simply give us the URL. WordPress automatically creates author pages for all users of the site who have published posts.
Let's add some CSS and see how it looks:
.media, .bd { overflow: hidden; _overflow: visible; zoom: 1; }
.media img, .media .img { float: left; margin-right: 10px; }
.media img { display: block; }
.media .imgExt { float: right; margin-left: 10px; }
.profile { margin-top: 10px; padding: 20px 10px; border: solid thin #c6c6c6; -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); }
.profile-links { padding: 5px 0; }
Social Shizzle Wizzle
So we've got a basic box, but what about all those extra fields we added? We can use the get_the_author_meta() function to retrieve those custom fields just as we did with the description. Let's go through the following example together, a replacement for our previous "profile-links" div:
<div class="profile-links">
<ul class="social-links">
<?php if ( get_the_author_meta( 'twitter' ) != '' ) { ?>
<li><a class="twitter-link" href="https://twitter.com/<?php echo wp_kses( get_the_author_meta( 'twitter' ), null ); ?>"><?php printf( esc_attr__( 'Follow %s on Twitter', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'facebook' ) != '' ) { ?>
<li><a class="facebook-link" href="<?php echo esc_url( get_the_author_meta( 'facebook' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Facebook', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'linkedin' ) != '' ) { ?>
<li><a class="linkedin-link" href="<?php echo esc_url( get_the_author_meta( 'linkedin' ) ); ?>"><?php printf( esc_attr__( 'Connect with %s on LinkedIn', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'googleplus' ) != '' ) { ?>
<li><a class="google-link" href="<?php echo esc_url( get_the_author_meta( 'googleplus' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Google+', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
</ul>
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'tuts_plus' ), get_the_author() ); ?>
</a>
</div>
We've created an unordered list and each list item will be our extra fields we added at the start of the article. Firstly we do a crude check to make sure that there is a value entered for each of them as we don't want links appearing that don't do anything. Next we create a link based on the information entered in the user profile. As you can see from the example we form the link by using the same get_the_author_meta() function, however depending on what we are outputting we use a different validation function. For the Twitter link as we are only entering a username and appending that to our link we strip any HTML from it using wp_kses() for the others as we are entering full profile URLs into our profile page we are using esc_url() to ensure they are properly formed URLs. I've shown you two different ways of doing it so you can see how flexible it can be.
By adding a little more CSS we can style it and we're almost done!
.social-links li { padding: 5px; display: inline; list-style: none; text-indent: -9999px; float: left; }
.social-links li a { background-position: 0 0; background-repeat: no-repeat; width: 16px; height: 16px; display: block; }
.twitter-link { background: url( images/twitter.png ) no-repeat; }
.facebook-link { background: url( images/facebook.png ) no-repeat; }
.linkedin-link { background: url( images/linkedin.png ) no-repeat; }
.google-link { background: url( images/google-plus.png ) no-repeat; }
The CSS I am using for demonstration purposes only you can of course do what you like with your own styling!
Getting Fancy
Now we have our basic box we can add all kinds of extra features. We're going to create a dynamic LinkedIn Profile Card when you hover over the LinkedIn icon.
First up we need to create some functions. We need to enqueue the LinkedIn JavaScript library on our blog posts and our author pages (more on this later!).
function wptuts_linkedin_js() {
if ( is_single() || is_author() ) :
wp_enqueue_script( 'linkedin', '//platform.linkedin.com/in.js', null, null, true );
endif;
}
add_action( 'wp_enqueue_scripts', 'wptuts_linkedin_js' );
Add the above code to your theme functions.php or wherever your added the code to change your contact methods. This will ensure we now have the required JavaScript loaded but only on pages where it is needed.
Next up we are going to create a little function to perform the hover functionality based on the author we are looking at:
function wptuts_linkedin( $author ) {
$authorinfo = get_user_meta( $author );
$linkedin = $authorinfo['linkedin'][0];
if ( isset( $linkedin ) ) : ?>
<script type="IN/MemberProfile" data-id="<?php echo $linkedin;?>" data-format="hover" data-related="false"></script>
<?php endif;
}
First thing you should notice is that we actually need to pass a parameter to this function when we call it. We want to pass the user ID of the author we want to create the hover card for. Essentially what we are doing is getting the user meta data using get_user_meta() we then pull out our LinkedIn URL that we created in the first half of the article. Then simply add that variable into our LinkedIn JavaScript so that it returns the correct user hover card. Here's the updated single.php extract:
<div class="profile-links">
<ul class="social-links">
<?php if ( get_the_author_meta( 'twitter' ) != '' ) { ?>
<li><a class="twitter-link" href="https://twitter.com/<?php echo wp_kses( get_the_author_meta( 'twitter' ), null ); ?>"><?php printf( esc_attr__( 'Follow %s on Twitter', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'facebook' ) != '' ) { ?>
<li><a class="facebook-link" href="<?php echo esc_url( get_the_author_meta( 'facebook' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Facebook', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'linkedin' ) != '' ) { ?>
<li class="linkedin-link"><?php wptuts_linkedin( get_the_author_meta( 'ID' )); ?></li>
<?php } ?>
<?php if ( get_the_author_meta( 'googleplus' ) != '' ) { ?>
<li><a class="google-link" href="<?php echo esc_url( get_the_author_meta( 'googleplus' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Google+', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
</ul>
<div class="clear"></div>
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'tuts_plus' ), get_the_author() ); ?>
</a>
</div>
As you can see we call our LinkedIn function by using wptuts_linkedin( get_the_author_meta( 'ID' ) ) this passes through the user ID of the correct author to be used in our function. A couple of simple CSS tweaks to make it show properly:
.linkedin-link { text-indent: 0 !important; }
As you can see now we have our author box with a nice hover card for our LinkedIn profile!
Author Page
It's often nice to show this author box at the top of an author's archive page. Twenty Twelve already does some of the work for us in author.php. So we can add what we've learnt above to add our extra information.
<div class="author-info">
<div class="author-avatar">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentytwelve_author_bio_avatar_size', 60 ) ); ?>
</div><!-- .author-avatar -->
<div class="author-description">
<h2><?php printf( __( 'About %s', 'twentytwelve' ), get_the_author() ); ?></h2>
<p><?php the_author_meta( 'description' ); ?></p>
<div class="profile-links">
<ul class="social-links">
<?php if ( get_the_author_meta( 'twitter' ) != '' ) { ?>
<li><a class="twitter-link" href="https://twitter.com/<?php echo wp_kses( get_the_author_meta( 'twitter' ), null ); ?>"><?php printf( esc_attr__( 'Follow %s on Twitter', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'facebook' ) != '' ) { ?>
<li><a class="facebook-link" href="<?php echo esc_url( get_the_author_meta( 'facebook' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Facebook', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'linkedin' ) != '' ) { ?>
<li class="linkedin-link"><?php wptuts_linkedin( get_the_author_meta( 'ID' )); ?></li>
<?php } ?>
<?php if ( get_the_author_meta( 'googleplus' ) != '' ) { ?>
<li><a class="google-link" href="<?php echo esc_url( get_the_author_meta( 'googleplus' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Google+', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
</ul>
<div class="clear"></div>
</div>
</div><!-- .author-description -->
</div><!-- .author-info -->
Conclusion
So there we have it. You now know how to alter your contact methods, how to pull different information from a user profile and display it on their blog posts. There is so much more you can do depending on what you want to achieve. Try adding a link to the user's website, display their latest Tweets, pull a commit history from GitHub; the options are endless. All the final code can be found below.
Vector Social Media Icons by IconDock.com & Double-J Design
Comments