Elvin

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

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.:)

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
}

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

Hi Marco,

The image you’ve shared seems to be a site using GP Premium’s Read template.

Here’s a demo site of it – https://gpsites.co/read/

It’s a pre-built site template you can install on top of your GeneratePress theme when you have GP Premium. ??

No problem. ??

Just for tablet, but for phone I would like just 1 column. I’m not sure if you’re able to get a visual on how the formatting is for the reference site that I linked above as far as image size and typography goes but I’d like to achieve that exact same look to a T if possible.

The tablet layout for the reference site is the same as what it has on desktop which is 4 columns.

And this is actually the same as what your site has. It’s a WP Show Post CSS default for column-ed layouts. (tablet and desktop share a setting, mobile in 1 column)

Were you seeing something different? Can you specify what exactly you want applied?

Perhaps we can continue here instead as the reply only contains CSS anyway.

Were you pertaining to the 4 column layout for WPSP on mobile?

If yes, you can use this CSS:

@media (max-width:768px){
.wp-show-posts-columns#wpsp-1662 {
margin-left: -1em !important;
}
.wp-show-posts-columns#wpsp-1662 article.wp-show-posts-single {
width: 25%;
}

.wp-show-posts-columns#wpsp-1662 article.wp-show-posts-single .wp-show-posts-inner {
padding: 0 0 1em 1em;
}
}

Hi @grey4radar

On this line – function db_change_doc_title( $title ){

Can you change $title to $title_parts_array?

So the code is actually pointing to the correct array.

Reply sent to email. Let us know here if you weren’t able to receive it.

Else, we can continue the conversation on the email thread if it has to be private. ??

Hm, it doesn’t look like it’s giving me the option to edit my reply anymore. It only lets me edit my latest response. Would it be possible to delete the comment on your end and I can copy and send it through the contacts page on mine? Regardless, I’ll send it anyway ??

I’ve got no privilege to do that, unfortunately.

But yes, I’ve seen the reference site as well. We can continue the conversation through email to keep everything else private. ??

This forum has a field for private URLs. ??

Can you edit your reply and move the site link to this private field?

Or you can send it to our contact page – https://wpshowposts.com/contact/

Hi @kingkrewl ,

Can you link us to the page in question and provide a mockup image of how you want things to be styled on mobile? So we have a reference for the CSS writeup.

Let us know. ??

No problem. Let us know if you need further help. ??

You can use get_day_link() to get months instead.

See WordPress’ handbook on this one – https://developer.www.ads-software.com/reference/functions/get_day_link/