How to put author image and author's name in 2 columns?

Hi there,

what code did you use to add the Author box ?

<div class="author-box">
    <div class="avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </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>" title="Read more"></a>
       </div>
    </div>
</div>

I added the hook and selected generate_after_content.

Here is the CSS:
/*for author box*/
.author-box {
background-color: #EFEFEF;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 4%;
margin-top: 60px;
font-size: 0.9em;
-webkit-box-shadow: -1px 6px 11px 1px rgba(0,0,0,0.29);
-moz-box-shadow: -1px 6px 11px 1px rgba(0,0,0,0.29);
box-shadow: -1px 6px 11px 1px rgba(0,0,0,0.29);
}

.author-links a {
font-size: 3em;
line-height: 0.5em;
float: right;
}

.author-box .avatar {
width: 60px;
border-radius: 100%;
margin-right: 20px;
}

.author-description {
line-height: 1.6em
}

h5.author-title {
margin-bottom: 0.5em;
}

/*css for author box ends*/

In your code the <h5> element needs to move inside this:

<div class="avatar">
    <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    <!--- move <h5> element here --->
</div>

Then we can align the image and the name.

I did that, but it now looks messed up.
Looks like the css needs some adjustment.

I'm not seeing the change that David suggested on your site. Can you re-add it?

Yup. I changed it back as it was looking ugly. The author name was appearing in a vertical manner below the author gravatar. It needed css. And I didn't know how to fix it. So to make sure user experience doesn't get affected I changed it back.

Sure. I've re-added it.

Check again.

Change this line:

<div class="avatar">

to

<div class="avatar-block">

Then edit this CSS and include the height: 60px; property commented below :

.author-box .avatar {
    width: 60px;
    border-radius: 100%;
    margin-right: 20px;
    height: 60px; /* Add this property */
}

Then add this CSS:

.avatar-block {
    display: flex;
    align-items: center;
}

Thanks David. It worked fine.
One thing, though.
It doesn't link to the author's page in the author's name.
It'd be great if that happened.

Replace this:

<span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>

With this:

<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span></a>

Let us know :)

Thanks Tom. It worked like a charm.

I was just wondering if it's possible to add social share icons below the author box without using any plugin.

You can add anything you like as it's custom HTML :)

Thanks for your advice. Just added some anchor text and it worked fine.

Just one problem.

My default links have underline below them. I want to remove that underline under all the links (only in the author box).

CSS please.😃