How To Add Author Bio Box in GeneratePress Theme

Steps to add author bio box in generatepress

  1. Click on Appearance- Elements – Add New
  2. Choose element as Hook
  3. Create a Hook
  4. Set display rules to the Hook
  5. Tick on Execute PHP
  6. Paste the below given code

Code for Author Bio Box in GeneratePress

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

Add CSS Style

Now you have successfully added author bio box in GeneratePress theme. To give a better look to your bio box you have to add 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.

  1. Appearance
  2. Customization
  3. Additional CSS
  4. Add this below-given CSS code

CSS Code for GeneratePress Author Bio box

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

A2 Hosting Review (2020) & Expert Opinion

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.

Hey, I am Keshab Chandra Behera a YouTuber, Blogger and Affiliate marketer

Leave a Comment