GeneratePress

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.

1

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

Appearance Elements v1

2

At the top, click on Add New Element.

Add New Element v1

3

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

Hook Create v2

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

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

Settings v2

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.

Display Rules v1

7

On the right-hand side, click on Publish.

Publish v1

8

Then go toAppearance > Customize.

Appearance Customize v1

9

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

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;
}
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

Leave a comment