Author Box Without Use of Plugin Schema Optimized to your WordPress Site

Do you want to add an author bio box to your WordPress site, an author bio box increases the authenticity of your blog. Many themes allow you to display author bio box using the default functionality, but some of the themes are not have this feature built-in, so you may enable it manually to display the author bio box section in your post. Also, the use of the plugin is absolutely not required. So, here in this article we can show your how to enable author box without use the plugin and enable auto Schema Optimized, learn more about Schema Markup Best Practices.

Importance of an Author Box?

If your website have multiple authors or one author for writing blog, you will need to introduce them each one of the posts. An author bio builds trust with your readers and also get some information like name and photo, obviously you can put a face to an description author is an excellent way to work towards creating good relationships with readers also link website, Twitter and Facebook, so people can easy connect and follow in social media.

Step 1: Add your Biographical Info

First of all, what you have to do is, you need to visit your site login into wp-admin dashboard Users → All Users →

Once you’re there, select Users. Next, hover over the user you want to add information about. When you see the “Edit” button, click it.

Now, scroll down until you get to the “Biographical Info” section you can navigate section and add the description of yours there in the Biographical Info box. You can also use HTML in this field to manually add links to the author’s social media profiles. Enter whatever info you want to show up in your author box and then save it.

Step 2: PHP Code to Display the Author Bio Box Schema Optimized

Now, we will provide the PHP code about how to display it in the post page on exact way. Displaying the Author Bio Schema Optimized in your post page.

Go to sidebar menu Appearance → Theme Editor → single.php

<div class="site-content">	
<div class="author-box clear" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
<span itemprop="image" alt="Photo of <?php the_author_meta( 'display_name' ); ?>">
<?php if(function_exists('get_avatar')) { echo get_avatar( get_the_author_meta('email'), '100','','author image' ); } ?>
</span>

<div class="author-meta"><h4 class="author-name">
<span>	<a itemprop="url" rel="author" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" itemprop="name">
<itemscope>About the <?php the_author_meta( 'display_name' ); ?></a>
</span></h4>

<div class="author-desc" itemprop="description">
<?php the_author_meta('description') ?>
</div>
</div>
</div>
</div>

Before paste PHP code in the file you want to confirm where you want to display author box into the post page, the best section to display is just an author information box below each article, then you can simply use that to display your author bio.

Now, you are look into single.php file just simply find (Ctrl+f) the text “comment”, just above the comment section you can paste PHP code.

This code simply get the author information and displays it below WordPress posts. We have described all of the checking and how to display the author name, gravatar image and description in each of them.

But, if you are still confused, then, follow the first step above, checks, If not added Biographical Info, then, no need to display the author bio at all.

Step 3: CSS Code to Style the Author Box

Next we’re going to add some custom CSS to style the line up the authors bio box. You can add the following custom CSS to style your author box. Feel free to modify it to meet your needs.

There is two different method to Paste CSS code change style author box

go to Appearance → Theme Editor → Stylesheet (style.css) paste code at the end of line.
simply paste it same page single.php include(CSS code).

if you use second method want to include style tags like this:

<style>Paste CSS code</style>

CSS code:

.author-box {
    padding: 15px 0 15px 0;
}
.author-box .avatar {
    border-radius: 50%;
    float: left;
    width: 72px;
    height: auto;
    line-height: 0.8;
    margin: 0 15px 0 0;
}
.author-box .author-meta {
    display: table;
}
.author-box .author-meta .author-name {
    font-size: 16px;
    margin-bottom: 5px;
    font-size: 18px;
    padding-bottom: 10px;
}
.author-box .author-meta .author-name a:hover {
    color: rgb(118, 44, 255); /*change color as theme */
}
.author-box .author-meta .author-desc {
    margin-bottom: 5px;
}

So, if you have added this CSS code too in your project, then, the display in the front-end of your site would be something like the below one

Conclusion:

This is how you can add the author bio box without use of plugin with schema optimized to your WordPress Site. Hope the article has provided you the perfect guideline for adding a beautiful, stunning, eye-catchy and author bio box in few minutes. But, if you are still confused and are willing to know more about it, then, do let us know via the comment section below and we will follow it up.

Recent Post Demotext