Check out get_avatar() and get_the_author_meta().
You could do something like:
<?php echo get_avatar( get_the_author_meta( 'ID' ), 96 ); ?>
<?php echo get_the_author_meta( 'description' ); ?>
For this to work, you need to fill out the user biography. Go to your Dashboard, then to Users > All Users. Click on the user you’d like to edit and make sure the text box labeled “Biographical Info” under the “About Yourself” header is filled in with something.
@stephencottontail okay, where would I insert that code in the author.php file?
You put that code in your author.php file where you’d like the author biography to appear. Can you post that file to Pastebin and put the link here?
Here is the paste bin link .
Thank you so much for helping, basically, I would like it to display (fairly large and central) image, name, biography and ‘website’ link (which will link to a full biography on a static page.
On line 10, between <section id="content" class="primary" role="main"> and <h2 id="author-title" class="archive-title">, try this:
<div class="authorbio">
<?php echo get_avatar( $author->ID, 96 ); ?>
<h2><?php echo esc_attr( $author->display_name ); ?></h2>
<p><?php echo get_the_author_meta( 'description' ); ?></p>
<a href="link/to/userbio">Full Biography</a>
</div>
You can then style it with CSS by using .authorbio img {}, .authorbio h2 {}, .authorbio p {}.
Brilliant, thank you. This is what it looks like at the moment 🙂 http://young-perspective.net/author/isaac/
How do I style it (e.g. title in header 1 format next to image)?
Also, how do I get “Full biography” to link to whatever is listed under “website” in WordPress account?
I seriously can’t thank you enough for helping me here, is there anything I can do to return the favour?
If your theme has a built-in custom CSS option, use it; otherwise, get a custom CSS plugin and try this:
.authorbio:before, .authorbio:after { content: ''; display: table; }
.authorbio:after { clear:both; }
.authorbio { margin-bottom: 30px; }
.authorbio img { display: inline; float: left; margin-right: 1.5em; }
.authorbio h2 { font-size: 24px; }
If you’d like to have more or less space after the author bio, change margin-bottom: 30px to whatever value you’d like. To change the font size of the author’s name, change font-size: 24px to whatever value you’d like.
Finally, to point the link to the author’s website, replace <a href="link/to/userbio">Full Biography</a> with <a href="<?php echo esc_url( get_the_author_meta( 'user_url' ) ); ?>">Full Biography</a>
Fantastic, the “full bio” can now link to a static page, thank you.
Where should I put that custom CSS code? In
style.css
or
editor-style.css
.
If it is in one of those files, then where, or can it be input anywhere?
Thanks again!
Neither. You should get a custom CSS plugin and put that CSS code there.
Also, I just realized I gave a wrong link in a previous message. This link is the correct one.
Brilliant, this is amazing, thank you so much.
How do I make it so that I can change the font size of the author title (e.g.Isaac Callan) without changing the size of all titles on the page (what happened when I played around with the font size).
And also, if this is possible, how do I marginally increase the line spacing between the words in the biography?
Thanks!
Also, if it is okay, which bit of CSS should I tweak to change the image size of the avatar?
To fix your first problem, only those four lines should be in the <div>. Your file should look like this:
<section id="content" class="primary" role="main">
<div class="authorbio">
<?php echo get_avatar( $author->ID, 96 ); ?>
<h2><?php echo esc_attr( $author->display_name ); ?></h2>
<p><?php echo get_the_author_meta( 'description' ); ?></p>
<a href="<?php echo esc_url( get_the_author_meta( 'user_url' ) ); ?>">Full Biography</a>
</div>
<h2 id="author-title" class="archive-title">
<?php printf(__('Author Archives: %s', 'zeeDynamicPro_language'), '<span>' . esc_attr($author->display_name) . '</span>'); ?>
</h2>
Note how the closing </div> is before <h2 id="author-title" class="archive-title">.
To change the size of the picture, change 96 in get_avatar() to the desired size.
And to change the line spacing in the biography, try this:
.authorbio p {
line-height: 1.3;
}
Experiment with different values until you get something you like.
Thank you, I am starting to understand the coding a little bit as well, I have managed to make a few changes (only minor) of my own to add extra line spaces and remove the bit which says “Author Archives”.
There are just two other things I want to do to this before it is officially perfect. Would you be able to advise me how to centralise the name and how to align the “Full biography” link centrally as well?
Thanks for your help again!
In fact, ignore that last post, I have managed to work that out. All I need to do now is centralise the image and move the biography element so that it display under the image.
Your site looks really good. To center the profile image, replace .authorbio img { display: inline; float: left; margin-right: 1.5em; } with .authorbio img { display: block; margin: 0 auto; }. And if you think the biography is too close to the profile image, add margin-bottom: 15px; to that rule as well. Experiment with values until you like the look.
