author bio box

BB Theme
1

Dear beaver team

May be a stupid question: Is this author bio box we can see after each blog post on wpbeaverbuilder.com built in the bb-theme? Or do you use a plugin for that?

Short: How do I get an author bio box after posts?

Thanks for helping me with that
Dominic

2

Hey Dominic,

I’ve already assigned another member of the team to assist you with you inquiry.

Ben

3

Thanks, Ben.

4

Hey Dominic,

We’re achieving ours with a little bit of custom code, but a quick Google search yields quite a few results for “wordpress author bio box” plugins. You might test out some of those, however, if you want to code it yourself, here’s what we’re doing…

function my_author_bio()
{
    global $post;

    if ( is_single() && $post->post_type == 'post' ) {

        $bio = get_the_author_meta( 'user_description' );

        if ( ! empty( $bio ) ) {
            ?>
            <div class="fl-author-bio clearfix">
                <div class="fl-author-bio-thumb">
                    <?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?>
                </div>
                <div class="fl-author-bio-text">
                    <h3>About <?php the_author(); ?></h3>
                    <p><?php echo $bio; ?></p>
                </div>
            </div>
            <?php
        }
    }

    return $content;
}
    
add_filter( 'the_content', 'my_author_bio' );

Justin

5

Hey Justin

Thanks a lot

Dominic

6

I was looking up information to see if BB theme had an author box and spotted this code. Unfortunately, it won’t work the way it is right now. The way it’s written it will simply override the_content with an author box. If you’re trying to append stuff to the end of the_content with a filter (not an action) you must append it to $content. Here’s what will work, and note I’m using ob_start to prevent using echo for the whole box and make it easier to edit. Also, using singular(‘post’) ensures it will only show on posts instead of calling global $post.

function my_author_bio($content)
{
    if ( is_singular('post') ) {

            ob_start(); ?>
            <div class="fl-author-bio clearfix media well">
                <div class="fl-author-bio-thumb media-left">
                    <img src="<?php echo get_avatar_url( get_the_author_meta('ID'), 96 ); ?>" alt="<?php the_author(); ?>" class="media-object" />
                </div>
                <div class="fl-author-bio-text media-body">
                    <h3 class="media-heading"><?php the_author(); ?></h3>
                    <p><?php echo get_the_author_meta( 'user_description' ); ?></p>
                </div>
            </div>
            <?php
        $authorbox = ob_get_contents();
		ob_end_clean();
		
		return $content.$authorbox;
    
} else { return $content; }

}
    
add_filter( 'the_content', 'my_author_bio' );

And I also added media classes from Bootstrap that pull image to the left and text to the right, including well class just to give it a background.

7

Thanks, Viktor! Much appreciated!

Justin

8

I am not so good at coding and would therefore like to add an author bio box with plugin until, BB add their own (as I suggested here: https://wpbeaverbuilder.uservoice.com/forums/270594-general/suggestions/11073849-create-an-author-bio-box)

I have now tried the only three responsive Author Bio box I could fine:

  1. Birds Author Box
    https://wordpress.org/plugins/birds-author-box/
    I tried it but it doesn’t create a widget nor appear automatically after a post in BB. At least I cannot see it.

  2. Simple author box
    https://wordpress.org/plugins/simple-author-box/installation/
    Looks really good on paper, but has not updated anything for more than a year (by dec. 2015). And it doesn’t create a widget nor appear automatically after a post in BB.

  3. Sexy Author Bio
    https://wordpress.org/plugins/sexy-author-bio/
    Looks terribly bad ( will try to edit it with CSSHERO), but the problem for now is that I cannot make it to show the Bio of the Post author. So it’s showing my bio, eventhough it’s another author who write the blogpost displayed above it.

Anybody has a good solution to this problem. Know a plugin that works with BB?

9

Hey Emmanuel,

I’d suggest hitting up the BB FB Group as well as the BB Slack Channel with the same question. :slight_smile:

Ben

10

I used Viktor’s solution and it worked great. Now, what would I add to that code to add a title to the author box that says “About the Author” which would ideally be H2 or H3 and above both the image and the text, left aligned?
Thanks for any help. (an example of a post on the site in question is here)

11

Hey David,

You should be able to add that after the line ob_start(); ?>. You can put something like <h2>About the Author</h2>. Let us know how it goes!

Ben

12

After seeing another smugmug blog post I really like the custom bio solution but am not sure where to start. How and where do I add Viktor’s custom code? I am using a BB child theme. Also where does it pull the bio image and content from?’

Thank you
Brad

13

Hey Brad,

That code goes to your child theme’s functions.php file and all data is taken from the profile page. The image from the Profile Picture and the description from the Biographical Info.

Hope this helps! :slight_smile:

Ben

14

That was easy, thank you, much better than any plugin.

Brad

15

No worries at all, Brad! Enjoy! :slight_smile:

Ben