Adding Author Box
For some reason, the author box isn’t readily available on the posts. You’ll have to introduce the following code to add the author box to all your posts.
1
On the left-hand side of the admin control panel, go to Appearance > Elements.
2
At the top, click on Add New Element.
3
From the dropdown menu, select Hook and click on Create.
4
In the title, type in Author Box or another name of your choice. Then copy and paste the following PHP code.
<div class="author-box">
<?php
global $post;
?>
<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
<h5 class="author-title"><?php printf( esc_attr__( 'About %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>
<div class="author-summary">
<p class="author-description"><?php echo nl2br( get_the_author_meta( 'description' ), null ); ?></p>
<div class="author-links">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">
...
</a>
</div>
</div>
</div>
5
Below where the code was pasted, adjust the Settings to the following:
Hook – Set to generate_after_content
Execute Shortcodes – Click the checkmark to enable
Execute PHP – Click the checkmark to enable
6
Go to Display Rules and from the dropdown menu, select Post.
Once you select Post, a secondary drop-down menu will appear. Select All Posts.
7
On the right-hand side, click on Publish.
8
Then go toAppearance > Customize.
9
Once you click on Customize, you will be taken to your home page and presented with the Customization menu.
Click on Additional CSS.
10
Within Additional CSS, copy and paste the code below.
.author-description {
margin-bottom: 1em;
margin-left: 4.6em;
color: #777;
}
@media (max-width: 425px) {
.author-description {
margin-left: 0em;
margin-top: 1em;
}
}
.author-box {
padding: 6% 8%;
margin-top: 80px;
display: flex;
flex-wrap: wrap;
background-color: #f7f7f7;
border: 1px solid #eee;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
@media (max-width: 425px) {
.author-box {
padding: 10% 12%;
}
}
.author-links {
margin-left: 4.6em;
}
@media (max-width: 425px) {
.author-links {
margin-left: 0em;
}
}
.author-box a {
border-bottom: 2px solid #d9eff9;
}
.author-box .avatar {
width: 60px;
border-radius: 100%;
margin-right: 20px;
}
h5.author-title {
margin-bottom: 0em;
margin-top:0.6em;
font-size:1.5em;
font-weight: 600;
letter-spacing: -0.02em;
}
Final Results
This is what the author box would look like. Of course, you can tweak and change it anyway preferred.
Hello, I have tried the tutorial yet the authorbox is not showing up at the end of my post. Could you help me with that?
The method proposed is one of the ways but there is an easier way to do it. Check out the following video.
https://www.youtube.com/watch?v=4x6CjGOyagc
Nice, will try using elements. Thank you ;D