David Stockdale's Scrapcode

Adding Author Box To Archive

The final piece of my co-authors archive template is the creation of an author box.

This contains the authors picture, name and description in a stylised box.

Here is the code to add to your “author.php” template:

add_action( 'beans_before_loop', 'beans_child_view_add_description');

function beans_child_view_add_description() {
?>
<?php
	$curauth = (get_query_var('author_name')) ? add_action( 'beans_before_loop', 'beans_child_view_add_description');
function beans_child_view_add_description() {
?>
<?php
	$curauth = (get_query_var('author_name')) ? get_user_by('slug', get_query_var('author_name')) :
	get_userdata(get_query_var('author'));?>

<div class="uk-container uk-container-center">
	<div class="postauthor-wrap">
		<div class="uk-grid">
			<div class="uk-width-1-6">
				<span itemscope itemprop="image" alt="Photo of <?php the_author_meta( 'display_name' ); ?>">
					<?php if(function_exists('get_avatar')) { echo get_avatar( get_the_author_meta('email'), '100' ); } ?>
				</span>
			</div>
			<div class="uk-width-5-6">
				<h5 class="vcard author" itemprop="url" rel="author">
					<span class="author-about">
						About <?php echo get_the_author_meta('first_name'); ?>
					</span>
				</h5>
				<?php the_author_meta('description') ?>
			</div>
		</div>
	</div>
</div>
<?php
}

-And here is the custom css to style it like the image above:

.postauthor-wrap {
	background-color:#f6f6f6!important;
}

.postauthor-wrap .uk-width-5-6 {
	padding-left:0px;
}

.postauthor-wrap .uk-width-1-6 {
	padding-left:50px;
	
}
.postauthor-wrap .uk-width-1-6 img {
	border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
}

Leave a Reply