[Support request] Author Box

Home Forums Support Author Box

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #975508
    John

    Hi

    I wish to create author box like “Volume”.

    Screenshot- https://prnt.sc/oo6vx1

    How can I do it?

    Thanks

    #975518
    Leo
    Staff
    Customer Support

    Hi 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/eYPxfn7nea

    #975598
    John

    Do you provide CSS please? Like Volume author box.

    #975607
    John

    And I have used this markup but It not showing my user gravatar image.

    #975612
    David
    Staff
    Customer Support

    This 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;
    }
    #975621
    John

    Great. Works fine.

    But author summary in same line. How can I put in bottom on user image/name.

    And Author title looks break/narrow.

    #975623
    David
    Staff
    Customer Support

    I have edited the CSS above to force the description to wrap to a new line.

    #975633
    John

    You rock David.

    Solved my both issue.

    Thanks a lot, for such awesome support.

    #975686
    David
    Staff
    Customer Support

    Glad we could be of help

    #1230925
    Nask

    Hi 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 Posts

    Your provided Custom CSS is added to:
    Appearance->Customize->Additional CSS

    #1230996
    David
    Staff
    Customer Support

    Looks good to me ! Thanks for sharing

    #1282045
    mohinish

    I 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>
    #1282197
    David
    Staff
    Customer Support
    #1306315
    Manoj

    Hi 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

    #1306725
    David
    Staff
    Customer Support

    Hi 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 Posts

    2. Then in Customizer > Additional CSS add the code i provide here:
    https://generatepress.com/forums/topic/author-box-4/#post-975612

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.