How do I add an author image in WordPress without plugin

Did you know you can incorporate an author box into your GeneratePress theme without the need for extra plugins?

To assist fellow bloggers, I've put together a comprehensive guide on adding an author box using the Element feature within the GeneratePress theme.

How do I add an author image in WordPress without plugin

You might wonder why not simply install a WordPress plugin for an author box. However, adding extra plugins can potentially slow down your website. Utilizing custom HTML and CSS code through the native GeneratePress Element feature is a better alternative.

Please note: This method is only applicable if you have the GeneratePress premium plugin installed on your WordPress website.

Why Do You Need an Author Box On Your Website?

Incorporating an Author Box at the conclusion of your blog post serves multiple purposes: it aids readers and search engines like Google and Bing in identifying the individual responsible for the content.

This practice fosters a strong relationship and trust between the reader and the author while also contributing to the establishment of authority within the online community.

Are you familiar with the EAT algorithm? To achieve favorable rankings on Google, it's essential to cultivate a brand that embodies expertise, authority, and trustworthiness—this is precisely what E-A-T represents. Implementing an Author Box marks the initial step toward fulfilling these criteria.

Steps to add author box in generatePress theme.

Prior to integrating the author box into your GeneratePress theme, you'll need to configure some fundamental settings within WordPress.

1. Add a Profile photo and Author description

Navigate to the WordPress dashboard and access the User section. Then, click on the Edit button located just below the username.

Next, scroll down until you locate the section labeled "About Yourself." Within the "Biographical Info" field, input your author description, and below it, set your Profile Picture.

Additionally, you can incorporate a link to your about us page within the Author box using a straightforward method. In the biographical info section, paste the link in the following format:

<a href="https://safidottech.com/about-us/">about us page</a>

By doing so, you can seamlessly include anchor text with a link in the Author box of the GeneratePress theme.

If you haven't set up Gravatar yet, you can do so by clicking on the link provided below. This will take you to the Gravatar website where you'll need to create an account using the same email address associated with your WordPress account. From there, you can upload your profile image. Once uploaded, it will automatically fetch the profile photo to your WordPress account.

2. Activate the Element module

To activate the Element module, navigate to Appearance > GeneratePress > Elements > Activate.

If you've already completed that step, you can proceed to the third step.

3. Create a new Hook Element

Now, navigate to the Appearance section and locate an option labeled "Element." Click on it. Then, click on "Add New Element" and choose "Hook."

4. Set the title as “Author Box” and paste the HTML code

You need to set the title as "Author Box" and paste the following HTML code into the code editor.

Copy the Below code

<div class="author-box">
    <div class="avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </div>
    <div class="author-info">
        <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        </h5>
        <div class="author-summary">
            <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div>
<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. Setup Hook setting

After pasting the code, you need to configure the Hook setting. In the Hook option, select "Generate After Content" and then click on "Execute PHP." Set the priority to "20".

6. Setup Display Rule

Now, click on the "Display Rule" located just to the right of settings. In the Location section, select "All Singular" and in the Exclude tab, choose "Front Page".

Now that you've finished configuring the Hook settings, click the "Publish" button.

7. Add CSS code

You're now tasked with styling your author box using CSS code. Here's how: Navigate to Appearance >> Customize >> Additional CSS. Paste the provided code below, then click the "Publish" button to save your changes.

Copy the CSS code :

.author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 30px;
	font-size: 0.9em;
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
        box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.author-box .avatar {
	width: 450px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
h5.author-title {
	margin-bottom: 0.1em;
	font-weight: 800;
}
.author-description {
	line-height: 1.6em
}
.author-links a {
	margin-top: -1.5em;
	font-size: 2em;
	line-height: 2em;
	float: left;
}
@media (max-width: 768px) {
	.author-box {
		padding: 20px;
		padding-bottom: 25px;
		margin-top: 60px;
		flex-direction: column;
		text-align: center;
	}
	.author-box .avatar {
		margin-right: 0;
		width: 100%;
		margin-top: -25px;
	}
	.author-box .avatar img {
		max-width: 100px;
	}
	.author-links a {
		float: none;
		align-self: center;
	}
	.author-description {
		margin-bottom: -0.1em;
	}
}

Congratulations! You've successfully integrated the Author box into your GeneratePress theme without the need for any plugins.

Note: If you're using the free version of the GeneratePress theme, you'll need to utilize a plugin to incorporate the author box. Here are some popular WordPress plugins you can consider for adding an author box to your website:

1. Simple Author Box – This lightweight plugin enables easy addition of an author box to your WordPress posts and pages.

2. WP Post Author – With this plugin, you can add an author box to your website, offering various customization options like positioning, social media icons, and more.

3. Author Bio Box – This plugin allows you to display an author box on your website, featuring options for customization such as appearance and inclusion of social media links.

Conclusion

We've now walked through the step-by-step process to integrate the Author box into the GeneratePress theme on WordPress. If you have any questions or uncertainties, feel free to ask in the comment section or connect with me on Twitter.

If you found this guide helpful, please consider sharing it with your blogging community and showing appreciation for the effort. Thank you.

How do I add an author image in WordPress without plugin

Why Do You Need an Author Box On Your Website?