Site logo

Archived topic

showing author photo and bio

4 replies · Started by Manish on July 13, 2018

Viewing posts 1–5 of 5

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;
}

https://docs.generatepress.com/article/adding-css/

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 ;)

This archived topic is closed to new replies.