Documentation › Coding Your Own Author Block

Coding Your Own Author Block

Whether it’s because you run a multi-author blog or you just can’t get enough of your new Gravatar pic and want to show it off next to all your blog posts, an Author box can be a great addition to your Single > Post layout. This tutorial will show you how to pair a custom code block with some PHP, HTML, and CSS to create your own author information box in a separate block—AKA our “Author Block.”

Customize the Single > Post Layout

We’ll be using some specific PHP code that will pull out the author information for the current post, so we want to edit the Single > Post layout for it to work properly.

Add a Custom Code Block

Put the block below the content block, in the sidebar, above it—anywhere you can think of.

The HTML and PHP Code

Here’s the code we’ll drop into that custom code block:

 <div id="authorBox"> 
<?php if (function_exists('get_avatar')) { 
echo get_avatar( get_the_author_email(), '50' ); }
?> 
<div> <h3>About <?php the_author_posts_link(); ?></h3> <p><?php the_author_description(); ?></p> </div> 
</div>

headawy-docs-code-author-block

Style It with Live CSS

Finally, we’ll style our author box with some custom CSS to push the Gravatar to the left, and we’ll give it a nice background color and border to set it apart.

#authorBox{ 
background: #f0f0f0; 
border: 1px solid #d2d2d2; 
padding: 10px; 
overflow:hidden; 
color: #333; } 

#authorBox h3{ 
font-size: 18px; 
color:#333; 
margin:0; 
padding:10px 10px 5px 10px; } 

#authorBox h3 a{ 
text-decoration:none; 
color: #333; 
font-weight: bold; } 

#authorBox img{ 
margin:5px 10px 0 5px; 
padding:5px; 
float:left; 
border: 1px solid #ddd; 
max-width: 50px; 
height: auto; } 

#authorBox p{ 
color:#333; 
margin:0; 
padding:0px 10px 10px 10px; } 

#authorBox p a{ color:#333; }

This article was last updated for Headway version 3.8.3

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress