Adding Author Bio to Bottom of Posts

[digitalnomadquest]

Is there any way I can add a picture and author bio of whoever wrote the post, onto the bottom of blog posts?

[nabeel]

Hi Sharon,

Thank you for reaching out to us. You can make use of the Author shortcode (please see http://demo.theme.co/integrity-1/shortcodes/author/) and paste it at the bottom of each posts. If you’re using Cornerstone then you can use the Classic Author element.

Hope this helps!

[digitalnomadquest]

Hi,

How do i use the classic author element to edit all blog posts? Will this do this every time without me having to do it manually? Thanks.

[ruenel]

Hello Sharon,

You can add a custom PHP code so that you will no longer each of the post. The code will automatically add the author bio after the post contents. If you already have a child theme, please add the following code in your child theme’s functions.php file

// Author Bio below the post content - Single page only.
// =============================================================================

add_action( "x_after_the_content_end", "add_post_shortcode" );

function add_post_shortcode() {
    if( is_singular( 'post' ) ){
        echo do_shortcode('[author title="About the Author"]');
    }
}
// =============================================================================

We would love to know if this has worked for you. Thank you.

[digitalnomadquest]

@RueNel

// Author Bio below the post content - Single page only.
// =============================================================================

add_action( “x_after_the_content_end”, “add_post_shortcode” );

function add_post_shortcode() {
if( is_singular( ‘post’ ) ){
echo do_shortcode(’[author title=“About the Author”]’);
}
}
// =============================================================================

It worked! How do I make the author bio appear before my convertkit email form?
Also how do I make the author picture larger?

[Prasant]

Hello Sharon,

Thanks for updating the thread.

@digitalnomadquest

How do I make the author bio appear before my convertkit email form?

Please add following JS code under X > Theme Options > CSS:

(function($) {
	$('.single-post article').find('.x-author-box').insertAfter('.scroll-box');
})(jQuery);

@digitalnomadquest

how do I make the author picture larger?

Please add following CSS under X > Theme Options > CSS:

.x-author-box .avatar {
    width: auto !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[digitalnomadquest]

@Prasant

.x-author-box .avatar {
width: auto !important;
}

Hi I just tried it but it isn’t working for me. Any advice?

[friech]

Hi Sharon,

Sorry for the typo, what Prasant mean is add the following JS code in Theme Options > JS

(function($) {
	$('.single-post article').find('.x-author-box').insertAfter('.scroll-box');
})(jQuery);

And this in Theme Options > CSS

.x-author-box .avatar {
    width: auto !important;
}

Thanks,

[digitalnomadquest]

@friech

.x-author-box .avatar {
width: auto !important;
}

Thanks for the response, it looks like it still isnt’ totally positioned right as the pinterest picture comes after the bio: https://digitalnomadquest.com/how-i-bought-a-rental-property-at-22-years-old/ I wanted the bio to show after the whole post and before the form. Is there any way to do this? Also is there a way to make sure there is a line space before the author bio?

[ruenel]

Hello Sharon,

I have removed the codes given by Prasant. I update the php code into this:

// Author Bio below the post content - Single page only.
// =============================================================================

add_action( "x_after_the_content_end", "add_post_shortcode", 5 );

function add_post_shortcode() {
    if( is_singular( 'post' ) ){
        echo do_shortcode('[author title="About the Author"]');
    }
}
// =============================================================================

The 5 in the code indicates the priority of the function from being run and display the output. And I also added this custom css to make sure that the bio will look much more fit to your design:

/* Author Bio */
.x-author-box .avatar {
    width: 120px;
}

.x-author-box .x-author-info {
    margin-left: 140px;
}

@media (max-width: 480px){
    .x-author-box .avatar {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }

    .x-author-box .x-author-info {
        margin-left: 0;
    }

}

I have edited your user profile as well. I added the biographical info so that it will display in the author bio box.

Please check your page now.

[digitalnomadquest]

@RueNel

// Author Bio below the post content - Single page only.
// =============================================================================

add_action( “x_after_the_content_end”, “add_post_shortcode”, 5 );

function add_post_shortcode() {
if( is_singular( ‘post’ ) ){
echo do_shortcode(’[author title=“About the Author”]’);
}
}
// =============================================================================

Awesome thank you!

[benursal]

Our pleasure!