How Do I Add A Bio Box On The Homepage Of My Blog

Here, Today I will guide you step by step to add an author bio box in Generatepress theme. Now you can add a beautiful and Schema Optimized author box in Generatepress theme with your Gravatar very easily.

After reading this article, you will be able to add author bio box in your WordPress website if you are using Generatepress theme. If you are using any other WordPress theme then this steps may not work, in this scenarion you can use some WordPress plugins to add author box in you WordPress website.

This feature is available only in Generatepress premium version, If you are using the free version of this theme then you will not be able to add author box in WordPress website. You can purchase Generatepress theme GPL version at a low price or buy now Generatepress licence key with lifetime free updates at a very cheap price.

Benefits of Author box on your website

Adding an author bio box in your website has many benefits, I have mentioned some of them.

1. More Traffic to your writing: When someone finished reading one of your well-written posts, the general idea is that they will crave more. Your author bio can include a link to a list of all your articles/websites. Or, it can have two or three titles you know will attract attention.

2. Possibilities Collaboration: Sometimes if any viewer came to read your blog and find it helpful. They may request for a backlink, guest post etc and you can generate income too.

I will show you the easiest method to add an author bio box in WordPress website if you are using GeneratePress Premium theme. If you are using free version of GeneratePress theme then you will not get this option to add author box in your website. In this case either you can purchase premium version of Generatepress theme or add author box in your WordPress site using a author bio box plugin. There are many free plugins available in WordPress Plugin library you can use to add autho box in WordPress website very easily.

How to add author box in Generatepress WordPress Theme without Plugin

Step 1: Create Yours Profile and Add Gravator (Profile picture)

To show Gravatar and about section on author bio box in Generatepress first you have to fill these details. Create your profile on your WordPress website and give the information such as name, about and gravatar etc which you want to show on your author bio box. You can update your Gravatar (profile picture) on www.gravator.com. To update your details first log in to your WordPress dashboard and click on Users then click on Your profile .

Step 2: Add Element (Choose Hook)

To add an author bio box in Generatepress theme we have to add an element. Log into your WP dashboard then click on Appearance and then on Elements.

Step 3: Create A New Hook

To add author bio box in Generatepress we have to create a new element, click on Add new element and create a new element. Choose Hook as the element type.

Step 4: Configure the Hook

Just copy and paste the below given codes on the box.

Paste this code in the Element box.

          <div class="author-box">     <div class="avatar">         <?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?>     </div>     <div class="author-info"> 		<h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person"> 			by <?php the_author_link(); ?> 		</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"> 						</div> 			<html> 				<head> 		<title></title> 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" /> 				</head> 					<style> 				*{ margin: 0; padding: 0;} 						.fa-twitter{ 							color: #1DA1F2 						} 						.fa-instagram{ 							color: #E1306C; 							} 						.fa-whatsapp{ 									color: #228C22 							} 				.centerdiv{ 			justify-content: center; 					align-items: center; 				} 						 			</style> 	<body> 		<div class="centerdiv"> 			<a href="https://www.facebook.com/rosebloggingpage"> 			<i class="fa fa-2x fa-facebook-square" aria-hidden="true"></i> </a> 			<a href="https://www.instagram.com/ytkeshab"> 				<i class="fa fa-2x fa-instagram" aria-hidden="true"></i> 				<a href="https://www.twitter.com/ytkeshab"> 					<i class="fa fa-2x fa-twitter-square" aria-hidden="true"></i> 					<a href="https://wa.me/917992591471?text=Hii"> 						<i class="fa fa-2x fa-whatsapp" aria-hidden="true"></i> 					</a> 						<a href="https://www.t.me/roseblogging"> 							 <i class="fa fa-2x fa-telegram" aria-hidden="true"></i> 				</a> 				</a> 			</a> 		</div> 				</body> 			</html> 	</div> </div>

Kindly replace my social media links with your social links. If you want to remove these social media links from your author bio box in Generatepress just remove the links from this code.

Step 5: Choose Setting of Author box

Click on setting then choose the layout where you want to show this author bio box, I have chosen generate_before_comment_container because its the best place to show bio box on the website. Tick mark on Execute PHP , and type "10" on priority.

Step 6: Set Display rules, Choose where you want to show author bio box

Set display rule of the bio box on your WordPress website. You can choose whether you want to show the author bio box on posts, pages. If you want to exclude the bio box in some posts or pages that's also available to configure. You have to specify if this author bio box in Generatepress is for all users of this website or for any particular user. Now you can publish this element and you see the author bio box in your WordPress website.

Step 7: Add CSS Style

Now you have successfully added author bio box in GeneratePress theme but it's not looking good. To give a better look to your bio box you have to add some CSS code to your website.

There are various methods to add CSS style to your WordPress website. You can add CSS codes into the additional CSS area in the GeneratePress customization. Follow these steps to add CSS in WordPress website.

Appearance
Customization
Additional CSS
Add this below-given CSS code

          .instagram-logo {   path {     fill: #000;   }   circle: #fff;   .logo { 		fill: #333;} } 	.author-box { 	padding: 3%; 	padding-bottom: 10px; 	margin-top: 60px; 	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; 	border: 2px solid #a7a8a7; 	border-radius: 25px 0px 25px 0px; 	 } .author-box .avatar { 	width: 400px; 	height: auto; 	border-radius: 100%;  	margin-right: 30px; } h5.author-title { 	margin-bottom: 0.1em; 	font-weight: 600; 	font-size: 20px; } .author-description { 	line-height: 1.6em } .author-links a { 	font-size: 15px; 	line-height: 20px; 	float: left; } @media (max-width: 768px) { 	.author-box { 		padding: 20px; 		padding-bottom: 0px; 		margin-top: 100px; 		flex-direction: column; 		text-align: center; 	} 	.author-box .avatar { 		margin-right: 0; 		margin-bottom: 10px; 		width: 100%; 		margin-top: -35px; 	} 	.author-box .avatar img { 		max-width: 100px; 	} 	.author-links a { 		float: none; 		align-self: center; 	} 	.author-description { 	text-align: left; }

Boom, Now you have successfully added an author bio box in Generatepress theme. It takes time to prepare such codes, please share this blog post.

If you face any issues during creating the author bio box in Generatepress, you can watch this video and get your query solved. Unless you can share your problem in our Facebook group or Telegram group, other members will definitely help you.

If you want to remove any social account links from this author bio box you have to just remove the social links from codes you have added in the elements.

Also Read: How To Start A Blog in & Make Money in 2021

Thanks for reading this article I hope this helped you to add author bio box in Generatepress theme, Please do share this on your social media. If you have any questions and suggestions you can share with us on our Facebook group and Telegram group.

Can I add author bio box in Generatepress theme without any plugin?

Yes, definitely you can add an author bio box in Generatepress by adding some codes, don't need to install any plugin.

How To add author bio box in WordPress webstie?

You can add an author bio box in WordPress website by using some author box plugin or by adding some code, here I have written a step by step guide to add author bio box in WordPress without plugin.

Can I add author bio box in free version of Generatepress theme?

No, you can't add author bio box in Generatepress if you are using free version. If you are using free generatepress theme then you should now buy the premium version of Generatepress theme.