Custom Author Box

[Ashin]

I’d like to use a custom author box on pages, not posts. The below codes work for posts. Could you please let me know what changes has to be made to make it appear on pages.

The below code is added as Elements Hook with ‘Posts’ as location. I’d like to use ‘Pages’ as location, but when I do that nothing happens. It works perfectly on posts.

<div class="author-box">
	<div class="avatar">
		<?php echo get_avatar( get_the_author_meta('user_email'), '96', '' ); ?>
	</div>
	<div class="author-info">
		<h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
			<span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
		</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">
			<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">...</a>
		</div>
	</div>
</div> 

And here is the CSS.

.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-radius: 5px;
	box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}
.author-box .avatar {
	width: 250px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
h5.author-title {
	margin-bottom: 0.1em;
	font-weight: 600;
}
.author-description {
	line-height: 1.6em
}
.author-links a {
	margin-top: -1.5em;
	font-size: 2em;
	line-height: 2em;
	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 {
		margin-bottom: -1.1em;
	}
}

What needs to be changed for these two codes to work on Pages, not Posts.

[David]

Hi there,

which Hook are you using ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ashin]

Appearance –> Elements — > Add New Element. On the popup, I choose ‘Hook’.

[Leo]

And what’s the name of the hook are you choosing in the hook drop down menu?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ashin]

generate_after_content

[Tom]

What about it isn’t working, exactly? Is anything showing up at all?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Ashin]

None showing up. I’m using the same code in 3 other sites. It’s working on all. But in those, I’ve added it to the bottom of ‘Posts’. Now, I’d like to add this to the bottom of ‘Pages’.

[David]

Can you link us to a page where it is meant to be displayed

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ashin]

I just tried the codes once again and it miraculously worked. Not sure what was wrong before.

[David]

Could have been Page Caching on your server.
Glad to hear its resolved.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts