[Resolved] Add Website Link to Author Box

[Fern]

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.

[David]

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

[David]

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

[Fern]

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/

[David]

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

[Fern]

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.

[David]

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/

[Fern]

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

[David]

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>

[Fern]

Perfect! Thank you for all of your assistance. 🙂

[David]

You’re welcome

[Author]

Posts