Archived topic
showing author photo and bio
4 replies · Started by Manish on July 13, 2018
How can one show author photo at the top and author bio at the bottom of the article. Like here
https://hpathy.com/cause-symptoms-treatment/hypertension-high-blood-pressure/
Hi there,
we would recommend a plugin for this option. As this is fairly bespoke we could try it with some code, this should get you started.
Add this PHP:
add_action( 'generate_before_entry_title', 'db_author_box_header', 10 );
function db_author_box_header() { if ( is_single() ) { ?>
<div class="author-box-header">
<div class="author-image">
<?php echo get_avatar( get_the_author_meta('email'), '100' ); ?>
</div>
<div class="author-bio">
<span>Written by <?php the_author_posts_link(); ?></span>
</div>
</div>
<?php }}
add_action( 'generate_before_comments_container', 'db_author_box_footer', 10 );
function db_author_box_footer() {
if ( is_single() ) { ?>
<div class="author-box-footer">
<div class="author-box-title">
<h3>
About the author
</h3>
</div>
<div class="author-box-footer-inner">
<div class="author-image">
<?php echo get_avatar( get_the_author_meta('email'), '100' ); ?>
</div>
<div class="author-bio">
<h3><?php the_author_posts_link(); ?></h3>
<p>
<?php the_author_meta('description'); ?>
</p>
</div>
</div>
</div>
<?php }}
https://docs.generatepress.com/article/adding-php/
And then add this CSS:
.author-image img {
border-radius: 100%;
border: 3px solid white;
box-sizing: border-box;
width: 80px;
}
.author-box-header {
display: flex;
flex-direction: column;
align-items: center;
margin-top: -70px;
margin-bottom: 40px;
}
.author-box-footer-inner {
display: flex;
align-items: center;
background-color: #f6f7f8;
padding: 20px;
}
.author-box-title {
text-align: center;
box-sizing: border-box;
border: 1px solid #e6e7e8;
padding: 5px;
}
.author-bio {
padding: 0 20px;
}
.author-bio p {
margin-bottom: 0;
}
.author-box-footer h3 {
margin-bottom: 0.25em;
}
Thanks for the help.
Shouldn't this php code work if we add it to gp hooks 'after content'?
Tried adding it that way but doesn't work.
Nevermind. I used a plugin that works with coauthors plus.
But your support is Awesome!
Glad you found a solution. That code cannot be executed for a hook. With GP 1.7 you will be able to just add the HTML to that hook as it has custom hooks and display condtions built it ;)