If you want to know how to add an author box to WordPress for GeneratePress theme without a plugin, this guide will show you exactly that.
Table of Contents:
What is an author box in WordPress
Author box is a website element shown before or after every published post or article. By default WordPress does not show the author box, just a link with the author name.
Why do you need an author box on your website
By showing the author box you provide visitors with a better user experience and clarity about who wrote the content. It is a much more attractive way to see author image and short bio description, than just a link with anchor text. Also a good practice is to use the same image on all social media platforms,- in this way people may remember you more and more.
What is Gravatar
Gravatar is a service for displaying author avatars globally across the internet. It is closely connected with WordPress as it is owned by Automattic (company behind the whole WordPress ecosystem).
In order to register on Gravatar you have to have an account on WordPress.com. Once you have an account,- upload your image and add an email associated with your author on your website. You need Gravatar for the image to be displayed on your author box.
How to add an author box to WordPress for Generatepress without plugin
First of all open your WordPress dashboard -> Users
You should now see all users with privileges registered on your website.
Click on “edit”
Make sure your user email address and gravatar email address matches in order for the image to be pulled out.
Write a short bio, add your social profiles and other data.
Now go to Appearance-> Elements-> Add new element-> Hook
Add title and copy / paste the code below
<div class="author-box">
<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
<h5 class="author-title">
<?php printf( esc_attr__( '%s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>
<div class="author-summary">
<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?>
</div>
</div>In the Hook settings tab make sure you pick generate_after_content and tick on execute PHP box.
Click on the display rules and set to Posts and All posts.
Click on update and go back to your WordPress dashboard.
Now we need to syle author box, so copy the code below.
/*Author Box Style*/
.author-box {
padding-top: 25px;
padding-bottom: 8px;
padding-left: 30px;
padding-right: 20px;
margin-top: 30px;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
flex-wrap: wrap;
display: flex;
align-items: center;
border-radius: 5px;
box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
border-left: 7px solid #0693E3;
}
.author-box .avatar {
width: 90px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
h5.author-title {
margin-top: -25px;
margin-top: 0.1em;
font-weight: 700;
font-size: 30px;
}
p.author-description {
line-height: 1.6em
}
/* FOR MOBILE DEVICES */
@media (max-width: 768px) {
.author-box {
flex-direction: column;
text-align: center;
padding: 50px 10px 10px;
}
.author-box .avatar {
margin-right: 0;
margin-bottom: 10px;
width: 100%;
margin-top: -5px;
}
.author-box .avatar img {
max-width: 90px;
}
h4.author-title {
margin-bottom: 0.1em;
}
.author-description {
margin-top: 10px;
margin-bottom: 10px;
}
/*End Author Box Style*/Go to appearance-> Customize-> Additional CSS and paste the code then click publish at the top of the page.
You can play with the settings if you like to change padding, font size and others. When you happy with the result you can leave it or move all CSS code to a style.css file for those using WordPress child theme.
Congrats, you have added an author box to WordPress for GeneratePress theme without plugin.
You may also like:
