- This topic has 22 replies, 4 voices, and was last updated 2 years, 9 months ago by Matt.
-
AuthorPosts
-
August 4, 2019 at 8:31 am #975508John
Hi
I wish to create author box like “Volume”.
Screenshot- https://prnt.sc/oo6vx1
How can I do it?
Thanks
August 4, 2019 at 8:42 am #975518LeoStaffCustomer SupportHi there,
This is code for the author box:
<div class="author-box"> <?php global $post; ?> <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div> <h5 class="author-title"><?php printf( esc_attr__( 'About %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5> <div class="author-summary"> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p> <div class="author-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more"> ... </a> </div> </div> </div>
And you can add it using Hooks Element:
https://www.screencast.com/t/eYPxfn7neaAugust 4, 2019 at 11:07 am #975598JohnDo you provide CSS please? Like Volume author box.
August 4, 2019 at 11:28 am #975607JohnAnd I have used this markup but It not showing my user gravatar image.
August 4, 2019 at 11:44 am #975612DavidStaffCustomer SupportThis is the CSS:
.author-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 4%; margin-top: 60px; font-size: 0.8em; } .author-links a { font-size: 3em; line-height: 0.5em; float: right; } .author-box .avatar { width: 30px; border-radius: 100%; margin-right: 20px; } h5.author-title { margin-bottom: 0.5em; }
August 4, 2019 at 12:13 pm #975621JohnGreat. Works fine.
But author summary in same line. How can I put in bottom on user image/name.
And Author title looks break/narrow.
August 4, 2019 at 12:21 pm #975623DavidStaffCustomer SupportI have edited the CSS above to force the description to wrap to a new line.
August 4, 2019 at 12:38 pm #975633JohnYou rock David.
Solved my both issue.
Thanks a lot, for such awesome support.
August 4, 2019 at 2:34 pm #975686DavidStaffCustomer SupportGlad we could be of help
April 8, 2020 at 2:40 am #1230925agramatikovHi Folks,
I am using the same script that you’ve provided, but i’ve made some edits that i want to share:
1. I’ve removed the link to the author, because in most cases when you are only 1 author and you use seo plugin, you will redirect this author link to home page, so there is no sense to have it.
2. I’ve changed :
<?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
TO
<?php echo nl2br( get_the_author_meta( 'description' ), null ); ?></p>
Because my author bio text was all in one line, looking very weird, so now it applies new lines in the text and looks nicer.
If you can check and confirm that all in the code is correct, so other people can use it in that way too 🙂
Thanks.This is my modified code:
<div class="author-box"> <?php global $post; ?> <div class="avatar"><?php echo get_avatar ( get_the_author_meta( 'ID' )); ?></div> <h5 class="author-title"><?php printf( esc_attr__( 'About %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5> <div class="author-summary"> <p class="author-description"><?php echo nl2br( get_the_author_meta( 'description' ), null ); ?></p> </div> </div>
Also screen shot of where it is added its not available anymore. So i’ve added it to:
Elements->Hooks->Hook->after_content
Display Rules->Post->All PostsYour provided Custom CSS is added to:
Appearance->Customize->Additional CSSApril 8, 2020 at 3:36 am #1230996DavidStaffCustomer SupportLooks good to me ! Thanks for sharing
May 13, 2020 at 1:45 am #1282045mohinishI could not make any of the above code work as I wanted. My only resort was to use this plain CSS (customize > Additional CSS) and HTML code (in Elements).
And it’s working for me now (one person blog).
.flex-container { display: flex;} .flex-container > div { margin: 10px; padding: 20px; }
This went inside Elements.
<big>about author</big> <div class="flex-container"> <div>my photo</div> <div> my description </div> </div>
May 13, 2020 at 4:35 am #1282197DavidStaffCustomer SupportThanks for sharing
May 29, 2020 at 7:09 am #1306315gofooddyHi David,
I am new to WordPress and generatepress. And screen shot that you have added doesn’t work. Can you please add some steps to implement this solution? It will be really helpful.
Thanks
May 29, 2020 at 10:01 am #1306725DavidStaffCustomer SupportHi there,
1. Create a new Hook Element.
https://docs.generatepress.com/article/hooks-element-overview/1.1 Add the code that Leo provides here to the Hooks Text area:
https://generatepress.com/forums/topic/author-box-4/#post-975518
1.2 Select the
after_content
hook from the hook list.
1.3 Check Execute PHP
1.4 Set Display Rules Location to Posts all Posts2. Then in Customizer > Additional CSS add the code i provide here:
https://generatepress.com/forums/topic/author-box-4/#post-975612 -
AuthorPosts
- The topic ‘Author Box’ is closed to new replies.