Author Box in GeneratePress By Using HTML Elements

Creating Custom HTML, CSS author Box Without a Plugin.

Create Author Box in GeneratePress using Elements and HTML, CSS.

The main reason you need an Author Box is on your website is due to E-A-T signals. It Stands for  Expertise, Authoritativeness, and Trustworthiness

Today I will show you how to create a simple author box in GeneratePress using HTML CSS.

The tutorial is only for GeneratePress premium theme users but sometimes it works for all theme users.

First, update to the latest GeneratePress version if you haven’t already, and then.

Since Author Bio is certainly not a positioning element however including a memoir the presents page assists Google with deciding the mastery of the essayist and why the Author ought to be trusted.

So by including Author Bio your site assists with expanding Google’s Search Quality Guidelines signals. Consequently, you need to include it GeneratePress Theme also utilizing a module strategy or without a module technique.

Likewise, read more about E-A-T and Quality Raters’ Guidelines clarified in Whiteboard Friday by Marie Haynes on the Moz site.

Besides, the Author Bio assists perusers with thinking about the individual behind the substance/site. It assists with expanding the validity of your blog since having bio make your website credible.

Creating Author Box With Plugin

1. Fancier Author Box

It’s a great and well-coded plugin by ThematoSoup If you want to add an author box in every single post than use this Author Box Plugin.
This plugin has more than 10000 Active installations. Average Rating of 4.8.
It has not been updated over the last 5 years. So be aware of compatibility issues.

2. Simple Author Box

The plugin is very simple to integrate you just need to set your bio and Gravatar. After setting up your biographical info go to Plugins>Add New>Simple Author Box>Install>Activate.
As suggested in the name it is very easy to set up.
Also, you can add up to 30 social media profiles on your Author Bio Box.

3. Starbox – the Author Box for Humans

While GeneratePress Premium customers are getting some information about Author Box, the client assistance group suggests the Starbox Author module. In this way, you can attempt the Starbox module in GeneratePress Theme.

Starbox module upholds Google Microformats vCard, customization of the creator information for each Author, Social Media Profiles interface for each Author, utilize your own Avatar than utilizing Gravatar, and so on

Moreover, If you need to keep away from the utilization of the above-recorded modules then you need to enact the Element Module to utilize Hook. In any case, the Element module is just accessible on the Premium form. In this way, to get the creator box without module follows the underneath strategy.

Prior to Adding Author Box in WordPress

Before the creator bio shows up in the WordPress site, you need to think about Gravatar and Biographical Info.

How to Enable Gravatar in WordPress?

  • Go to your WordPress Dashboard.
  • Visit the Users Menu.
  • Alter your User Profile.
  • Go to About Yourself area > Profile Picture.
  • Presently Click on You can change your profile picture on Gravatar.
  • You will be diverted to the Gravatar site.
  • Sign in/Signup utilizing WordPress.com qualifications.
  • Approve your WordPress account with Gravatar.
  • Presently go to Add a New Image area.
  • Transfer your image.
  • Rate your Gravatar between G, PG, R, and X.
  • You’re finished with the Gravatar profile.
  • Return to the About Yourself Section and you will actually want to See your Profile Picture.
Custom html css author box

The profile picture shows up while remarking on WordPress destinations, Author Bio, WordPress discussion. This one picture works for every one of your profiles.

Personal Info

Subsequent to chipping away at Gravatar in the About Yourself segment, you need to compose the Author Bio. It will show up on your site alongside your profile picture. You can likewise connect up your Social Media Profile utilizing Anchor Tag in the Biography Section.

Gravatar

Gravatar is a Globally Recognized Avatar. It is a piece of WordPress that is kept up and upheld via Automattic.

Utilizing the Gravatar site you can make your profile simply by joining and transferring the photographs. Furthermore, Gravatar can be empowered in any WordPress site naturally.

To begin with, you need to make a record on the Gravatar site to finish your profile.

  • Go to your Dashboard > Appearance > GeneratePress.
  • Activate the Elements Module.
  • Now go to Appearance > Elements.
  • Click on Add New Element and Choose Element Type as Block.

Now, you can use Block Elements with Gutenberg. Let’s explore Block Element Settings.

Copy and paste these HTML code to HTML element box in GeneratePress. 

Code I

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

CODE II

<div class="author-box">
	<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 wp_kses( 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>

Go to Hook Settings and choose Hook to show after_content. Check the Execute PHP box. Assign the Priority to 20.

Author Box in GeneratePress

Again, Go to Display Rules and Choose the Location to display in Post > All Posts.

Now I am providing here some Css that you can paste into your WordPress Customize Editor.

CODE I

.author-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 4%;
    margin-top: 30px;
    font-size: 1em;
    box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.author-links a {
    font-size: 3em;
    line-height: 0.5em;
    float: right;
}

.author-box .avatar {
    width: 30px;
    border-radius: 100%;
    margin-right: 20px;
}

.author-title {
   font-weight: 700;
}

h4.author-title {
    margin-bottom: 0.5em;
}

.author-description {
	margin-bottom: 10px;
}

/* For Mobile Devices */
@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        text-align: center;
	padding: 50px 10px;
    }

    .author-box .avatar {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
	margin-top: -35px;
    }

    .author-box .avatar img {
        max-width: 70px;
    }
}

CODE II

.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: 250px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
h5.author-title {
	margin-bottom: 0.1em;
	font-weight: 600;
}
.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;
	}
}

Pasting the CSS work:

Go to Appearance>Customize>Additional CSS:

Paste One CSS code that is given above this picture. It will work only if you are a GeneratePress user.

After pasting these CSS codes your Author box Will look something like this.

Syed Saadullah

I am Saad CO-Founder at FK Media. I run this blog where I craft actionable advice about WordPress, productivity, and cost per action. I am also a speed optimization expert😉

1 thought on “Author Box in GeneratePress By Using HTML Elements”

Leave a Comment