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.
Contents In The Article
hide
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
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.
Please Iske Baare Me Bhi Video Banao
gp theme me footer me logo quick link kaise lagate hai jaise ki aapne lagaye hai
Sidebar Me Category List Hota Hai Uska Design Change Kaise Kare
thanks bro
Execute PHP – Unable to execute PHP as DISALLOW_FILE_EDIT is defined.
Please Guide This Error
The author image is not showing in a round shape in the author box. What will be the fix?
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
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.
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.
Same problem author box is not as yours only simple
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
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.
Any Help About my Described issue????
sir author box square me dikha raha hai plz guide me i am regular subscriber your channel help
धन्यबाद सर आपके द्वारा दी गयी जानकारी मेरे लिए बहोत ही helpfull रहती है
in फ्यूचर आप हमें ऐसी ही अच्छी अच्छी जानकारी देते रहे हम आपको सपोर्ट करते रहेंगे
thankuu sir
Welcome!
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 ❤️
Element (GeneratePress theme)
Hey Man can you confirm that the Plugin that you are selling (Imagify) on themes9 is actually infinite or growth?
It’s an Infinite plan.
Among lots of Indian Bloggers, I like your tips & videos very much. Keep going………well wishes from Bangladesh.
Thanks Shahriar, Keep visiting 🙂