Insert Author Info/Bio Box + Pic

Hi @mdotk ,

Can you provide us a mock-up image of how you want things to be laid out? We’ll be using it as reference to provide the appropriate way to go about it.

Let us know. ??

Woah @ejcabquina, that’s fast support! Something like this directly below the end of each of the author’s articles? Bio pulled from their WordPress user profile.

View post on imgur.com

Thank you!!

Can you specify any conditions for this as well?

Example conditions:
– Add this author box on single posts page ONLY.
– Add this author box on a specific post type ONLY.
– Add this author box on a specific category term ONLY.

As for the solution itself, it will require custom PHP as you’ll need to have the HTML structure and its dynamic content hooked around generate_after_content hook or generate_before_comments_content depending on where specifically you want this to be placed.

See our hook visual guide for reference –
https://docs.generatepress.com/article/hooks-visual-guide/#single-post

The code will look something like this:

add_action('generate_after_content', 'custom_insert_author_box', 20);
function custom_insert_author_box(){
//do your HTML here and output it using echo
}

Thanks @ejcabquina, Add this author box on single posts page ONLT would be great.

Might want to consider a plugin like this if you want to avoid creating a custom solution from scratch:
https://en-ca.www.ads-software.com/plugins/simple-author-box/

Or if you have GP Premium then you can create it with a block element ??

Leo’s suggestion would be the easiest way to do it. Consider trying it out as it’s our preferred way of doing things w/ GP.

But if you wish to try something else, a simple PHP + CSS combo could work.

PHP would need look something like this –

add_action('generate_after_content', 'custom_insert_author_box', 20);
function custom_insert_author_box(){
	if( is_single() ) {
	echo '<div id="author-box"> 
		<div class="gravatar-col">'.get_avatar( get_the_author_meta( 'ID' ), 32 ) .'
		</div>
		<div class="author-info">
			<div class="author-name"><span class="author">
					
					<span class="author-name" itemprop="name">
						<span class="author-before-text">Posted by </span>'.esc_html( get_the_author() ).'
						</span> 
				</span> 
			</div>
			<div class="author-desc">
				<p class="author-bio">
					'.get_the_author_meta( 'description' ).'
				</p>
			</div>
		</div>
	</div>';
	}
}

CSS would look like this –

div#author-box {
    display:  flex;
    flex-direction: row;
    padding: 20px;
}

.gravatar-col {
    display: flex;
    align-content: center;
    align-items: center;
    padding: 20px;
}

img.avatar.avatar-32.photo {
    border-radius: 50%;
}

span.author-before-text {
    display: block;
}

.author-info .author-name { 
    margin-bottom: 20px; 
}

It’s going to look roughly like this – https://share.getcloudapp.com/jkuvn0Qq – which will need CSS refining.

To achieve the best look, you’ll have to do the CSS tweaking to your preference.

But really, to avoid this tedious process, Leo’s suggestion is the way to go.:)

Thank you very much to both of you, I have the hook process working, and will refine the CSS!

Nice one. Let us know if you need further help. ??