- This topic has 19 replies, 4 voices, and was last updated 5 years, 6 months ago by
.
-
Posts
-
I’ve added author box using custom elements and some css.
It just has one problem, the author image doesn’t show up on the left side of the ‘author name.’ Also the author name doesn’t link to the author bio.
It’ll need a little tweaking in the css.
Customer Support
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.Lead Developer
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.😃
- The topic ‘How to put author image and author’s name in 2 columns?’ is closed to new replies.
