How To Add Author Box In GeneratePress Premium Theme Without Plugin

4.8/5 - (42 votes)

This post is all about how to add an author box in the generatepress theme.

Let’s say you have just installed generatepress premium theme on your WordPress website, and you want to add an author box after every post.

Then this article is going to help you a lot because I have shared how to create author Box after post in generatepress premium theme without a plugin.

Example of Author Box

author box example
Example of Author Box

Php Code

<div class="webinsights-author-box">
    <div class="insights-avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </div>
    <div class="insights-author-info">
        <div class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        </div>
        <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="https://webinsights.in/" title="Read more about this author">...</a>
       </div>
    </div>
</div>

CSS Codes


/* Webinsights author box*/

.webinsights-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: rgb(23 43 99 / 30%) 0 2px 10px;
    border-radius: 25px;
}

.webinsights-author-box .insights-avatar {
	width: 250px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
.webinsights-author-box .insights-avatar img {
		border-radius: 100%;
	}
.author-title {
	margin-bottom: 0.1em;
	font-weight: 600;
	font-size:18px;
}
.author-description {
	line-height: 1.6em;
	font-size:16px;	
}
.author-links a {
	margin-top: -1.5em;
	font-size: 2em;
	line-height: 2em;
	float: left;
}
@media (max-width: 768px) {
	.webinsights-author-box {
		padding: 20px;
		padding-bottom: 25px;
		margin-top: 60px;
		flex-direction: column;
		text-align: center;
	}
	.webinsights-author-box .insights-avatar {
		margin-right: 0;
		width: 100%;
		margin-top: -60px; 
	}
	.webinsights-author-box .insights-avatar img {
		max-width: 100px; 
	}
	.author-links a {
		float: none;
		align-self: center;
	}
	.author-description {
		margin-bottom: -0.1em;
	}
}
/*end of webinsights author box*/
  

Wrapping Up

This is all about how to create or add an author box in the generatePress Theme in wordpress.

Let me know if you have any questions about the same.


One Request?

I worked hard on this post to help the blogging community. It would help me a lot if you consider sharing it on social media networks. Because Sharing Is Caring.. ♥️

Sharing Is Caring...
Avatar of ANAND

An aspiring MCA student formed an obsession with Blogging, SEO, Digital Marketing, and Helping Beginners To Build Amazing WordPress Websites.

22 thoughts on “How To Add Author Box In GeneratePress Premium Theme Without Plugin”

  1. Hi Good job,
    But my author box with your PHP and CSS not showing at all same issue with your social share icons for entire posts sticky is working file but these two are same result hope you will not mind to answer thanks.

    Reply
    • Hi Good job,
      But my author box with your PHP and CSS not showing at all same issue with your social share icons for entire posts sticky is working file but these two are same result hope you will not mind to answer thanks.

      Reply
  2. Hi Anand Kumar Sir! Greetings from Sarfaraz,
    would you like to share how to set categories in sidebar and homepage design
    as used this in your website

    Best Regards

    Reply
  3. Hi there, Please help me with CSS code, 2 minute work, I try to configure by myself but it didn’t work. If you check your blog page layout ( Not Single Page or anything else, check exact blog page ) in Tablet version… You’ll see your Post Featured image is center aligned, but that center aligned image didn’t have right Width as well as height, means it is smaller in height & width. I think just like mine you have used theme Featured Image Width & Height Dimensions. Would you help me with the CSS Code that makes the images Full & Centre aligned on Tablet Version only… I do not want these settings to apply on Mobile or Desktop, as image looks perfect on them, just the Tablet Version where I have Right & Left Space on images & image is smaller as well it looks too dull… So, Hoping that you’ll help me with this issue.

    Reply
  4. धन्यबाद सर आपके द्वारा दी गयी जानकारी मेरे लिए बहोत ही helpfull रहती है
    in फ्यूचर आप हमें ऐसी ही अच्छी अच्छी जानकारी देते रहे हम आपको सपोर्ट करते रहेंगे
    thankuu sir

    Reply
  5. Thanks For All Your Helpful Content Sir,

    Please Where Are We Going Add The PHP Code And The CSS? There Is No Video For The Article.

    Thanks ❤️

    Reply

Leave a Comment