[Resolved] Add Website Link to Author Box

Home Forums Support Add Website Link to Author Box

  • This topic has 10 replies, 2 voices, and was last updated 7 months ago by David.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1163653
    beetle

    Hi,

    I used the following in a hook element to create an author bio box

    <div class="author-box">
    	<?php 
    	
    	global $post;
    	
    	$author_id = $post->post_author;
    	
    	?>
    	
    	<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 this in the css:

    .author-links a {
        font-size: 3em;
        line-height: 0.5em;
        float: right;
    		padding-bottom: 20px;
    }
    
    .author-box {
        padding: 4%;
        margin-top: 60px;
        font-size: 0.9em;
    		border: 1px solid #EFEFEF;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    
    .author-box .avatar {
        width: 100px;
        border-radius: 30%;
    		margin-right: 20px;
    }
    
    h5.author-title {
    		margin-top:	2.0em;
        margin-bottom: 0.1em;
    		font-size: larger;
    }

    I am wondering how to have the authors website link display in their bio (if they have a website link in their user profile).

    Can you please provide the necessary edits to search for a author website and display it if there is one. And also for the link to be nofollow and open in a new window.

    Thanks very much.

    #1163894
    David
    Staff
    Customer Support

    Hi there,

    you can use this markup instead:

    <`div class=”author-box”>

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

    <a href=”<?php printf( get_the_author_meta( ‘user_url’) );?>” class=”author-url” target=”_blank” rel=”nofollow” >
    <?php printf( get_the_author_meta( ‘user_url’) );?>
    </a>

    <div class=”author-links”>

    <a href=”<?php echo get_author_posts_url( get_the_author_meta( ‘ID’ ) ); ?>” title=”Read more”>

    </a>

    </div>

    </div>

    </div>`

    It will insert the URL below the description with a CSS Class of author-url for styling

    #1163895
    David
    Staff
    Customer Support

    Hi there,

    you can use this markup instead:

    <div class="author-box">
    
        <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>
    
            <a href="<?php printf( get_the_author_meta( 'user_url') );?>" class="author-url" target="_blank" rel="nofollow">
                <?php printf( get_the_author_meta( 'user_url') );?>
            </a>
    
            <div class="author-links">
    
                <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">
                    ...
                </a>
    
            </div>
    
        </div>
    
    </div>

    It will insert the URL below the description with a CSS Class of author-url for styling

    #1164608
    beetle

    Hi David,

    Thanks very much. That worked well.

    Can you please help me with the styling? I would like the website link to display as an icon eg. the link icon: https://fontawesome.com/icons/link?style=solid

    Rather than as the naked url eg.

    https://www.nakedurl.com/

    #1165008
    David
    Staff
    Customer Support

    You would need to replace the line commented here with your Icon code:

    <a href="<?php printf( get_the_author_meta( 'user_url') );?>" class="author-url" target="_blank" rel="nofollow">
    
         // Need to replace folowing line with your icon code
    
         <?php printf( get_the_author_meta( 'user_url') );?> 
    
    </a>

    You can use the HTML that Font Awesome provides or any other font library or inline SVG

    #1169676
    beetle

    Hi David,

    Is there a built-in theme icon I can use? If so, can you please provide the line of code I will need to use to replace what you have indicated above.

    Thank you.

    #1169686
    David
    Staff
    Customer Support

    Not one built into the theme, so i grabbed this SVG off of Icomoon:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <title>link</title>
    <path d="M13.757 19.868c-0.416 0-0.832-0.159-1.149-0.476-2.973-2.973-2.973-7.81 0-10.783l6-6c1.44-1.44 3.355-2.233 5.392-2.233s3.951 0.793 5.392 2.233c2.973 2.973 2.973 7.81 0 10.783l-2.743 2.743c-0.635 0.635-1.663 0.635-2.298 0s-0.635-1.663 0-2.298l2.743-2.743c1.706-1.706 1.706-4.481 0-6.187-0.826-0.826-1.925-1.281-3.094-1.281s-2.267 0.455-3.094 1.281l-6 6c-1.706 1.706-1.706 4.481 0 6.187 0.635 0.635 0.635 1.663 0 2.298-0.317 0.317-0.733 0.476-1.149 0.476z"></path>
    <path d="M8 31.625c-2.037 0-3.952-0.793-5.392-2.233-2.973-2.973-2.973-7.81 0-10.783l2.743-2.743c0.635-0.635 1.664-0.635 2.298 0s0.635 1.663 0 2.298l-2.743 2.743c-1.706 1.706-1.706 4.481 0 6.187 0.826 0.826 1.925 1.281 3.094 1.281s2.267-0.455 3.094-1.281l6-6c1.706-1.706 1.706-4.481 0-6.187-0.635-0.635-0.635-1.663 0-2.298s1.663-0.635 2.298 0c2.973 2.973 2.973 7.81 0 10.783l-6 6c-1.44 1.44-3.355 2.233-5.392 2.233z"></path>
    </svg>

    SOURCE:
    https://icomoon.io/

    #1169699
    beetle

    Hi David,

    Thanks very much that works great however, it now shows a link for every author, regardless of whether they have a website url in their user profile.

    If they do not have a website link in their profile, it shows the url of the post being viewed. Here is the code I am using in the element:

    <div class="author-box">
    
        <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>
    
            <a href="<?php printf( get_the_author_meta( 'user_url') );?>" class="author-url" target="_blank" rel="nofollow">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
    <title>link</title>
    <path d="M13.757 19.868c-0.416 0-0.832-0.159-1.149-0.476-2.973-2.973-2.973-7.81 0-10.783l6-6c1.44-1.44 3.355-2.233 5.392-2.233s3.951 0.793 5.392 2.233c2.973 2.973 2.973 7.81 0 10.783l-2.743 2.743c-0.635 0.635-1.663 0.635-2.298 0s-0.635-1.663 0-2.298l2.743-2.743c1.706-1.706 1.706-4.481 0-6.187-0.826-0.826-1.925-1.281-3.094-1.281s-2.267 0.455-3.094 1.281l-6 6c-1.706 1.706-1.706 4.481 0 6.187 0.635 0.635 0.635 1.663 0 2.298-0.317 0.317-0.733 0.476-1.149 0.476z"></path>
    <path d="M8 31.625c-2.037 0-3.952-0.793-5.392-2.233-2.973-2.973-2.973-7.81 0-10.783l2.743-2.743c0.635-0.635 1.664-0.635 2.298 0s0.635 1.663 0 2.298l-2.743 2.743c-1.706 1.706-1.706 4.481 0 6.187 0.826 0.826 1.925 1.281 3.094 1.281s2.267-0.455 3.094-1.281l6-6c1.706-1.706 1.706-4.481 0-6.187-0.635-0.635-0.635-1.663 0-2.298s1.663-0.635 2.298 0c2.973 2.973 2.973 7.81 0 10.783l-6 6c-1.44 1.44-3.355 2.233-5.392 2.233z"></path>
    </svg>
            </a>
    
            <div class="author-links">
    
                <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">
                    ...
                </a>
    
            </div>
    
        </div>
    
    </div>

    Can you please tell me how to adjust this so only authors with a website link set in their profile will have the link icon (and a link) show in their author box?

    Regards,
    Fern

    #1170058
    David
    Staff
    Customer Support

    Try:

    <div class="author-box">
    
        <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>
    
            <?php $author_url = get_the_author_meta( 'user_url');
    
            if ( ! empty ( $author_url ) ) {
    
            ?>   
    
                <a href="<?php printf( get_the_author_meta( 'user_url') );?>" class="author-url" target="_blank" rel="nofollow">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                    <title>link</title>
                        <path d="M13.757 19.868c-0.416 0-0.832-0.159-1.149-0.476-2.973-2.973-2.973-7.81 0-10.783l6-6c1.44-1.44 3.355-2.233 5.392-2.233s3.951 0.793 5.392 2.233c2.973 2.973 2.973 7.81 0 10.783l-2.743 2.743c-0.635 0.635-1.663 0.635-2.298 0s-0.635-1.663 0-2.298l2.743-2.743c1.706-1.706 1.706-4.481 0-6.187-0.826-0.826-1.925-1.281-3.094-1.281s-2.267 0.455-3.094 1.281l-6 6c-1.706 1.706-1.706 4.481 0 6.187 0.635 0.635 0.635 1.663 0 2.298-0.317 0.317-0.733 0.476-1.149 0.476z"></path>
                        <path d="M8 31.625c-2.037 0-3.952-0.793-5.392-2.233-2.973-2.973-2.973-7.81 0-10.783l2.743-2.743c0.635-0.635 1.664-0.635 2.298 0s0.635 1.663 0 2.298l-2.743 2.743c-1.706 1.706-1.706 4.481 0 6.187 0.826 0.826 1.925 1.281 3.094 1.281s2.267-0.455 3.094-1.281l6-6c1.706-1.706 1.706-4.481 0-6.187-0.635-0.635-0.635-1.663 0-2.298s1.663-0.635 2.298 0c2.973 2.973 2.973 7.81 0 10.783l-6 6c-1.44 1.44-3.355 2.233-5.392 2.233z"></path>
                </svg>
                </a>
    
            <?php } ?>
    
            <div class="author-links">
    
                <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">...</a>
    
            </div>
    
        </div>
    
    </div>
    #1171014
    beetle

    Perfect! Thank you for all of your assistance. 🙂

    #1171232
    David
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.