Customization Tips

Let's advance your theme's functionality.

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.


On the left-hand side of the admin control panel, go to Appearance > Elements.

Appearance Elements v1


At the top, click on Add New Element.

Add New Element v1


From the dropdown menu, select Hook and click on Create.

Hook Create v2


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">
		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">
Add Title Paste Code v2


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

Settings v2


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.

Display Rules v1


On the right-hand side, click on Publish.

Publish v1


Then go toAppearance > Customize.

Appearance Customize v1


Once you click on Customize, you will be taken to your home page and presented with the Customization menu.

Click on Additional CSS.

Additional CSS v3


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;
} {
    margin-bottom: 0em;
    font-weight: 600;
    letter-spacing: -0.02em;
Additional CSS Copy Paste v1

Final Results

This is what the author box would look like. Of course, you can tweak and change it anyway preferred.

Author Box Final v2

Comments (3)

Leave a comment