Authors details such as social media links, emails etc → Is this Meta or something else?

by

The author section of my first WordPress theme is currently hard coded in HTML.

See the live website here.

This One.

These social media Icons and the link associated with them are not provided in the backend author dashboard by default and they need to be coded.enter image description here

Can someone guide me how to?

Is this feature will also come under meta category?

Sir, I have one more confusion which part of the code you have written will be used for actually printing the social media URL’s that we have saved in the author’s dashboard in the backend.

For the sake of simplifying my query, I am putting here my author’s code to be displayed on the front end →

<div class="author-box">
    <div class="author-image">
        <img src="http://blog.blogeto.com/html/images/author_profile.png" alt="">
    </div>
    <div class="author-description">
        <h2>
            <!-- AUTHORS NAME --> <?php the_author(); ?>
            <!-- <a href="<?php get_author_posts_url(); ?>"><?php the_author() ?></a> -->
            <a href=""><i class="fa fa-home" aria-hidden="true"></i></a>
            <a href=""><i class="fa fa-home" aria-hidden="true"></i></a>
            <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
            <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
            <a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a>
            <a href=""><i class="fa fa-youtube" aria-hidden="true"></i></a>
        </h2>
        <p> Lorem Ipsum is simply dummy text.<a href="#">Read More</a> </p>
    </div>
    <div class="author-category">
      <ul>
          <li><a href="">CATEGORY 1</a></li>
          <li><a href="">CATEGORY 2</a></li>
          <li><a href="">CATEGORY 3</a></li>
          <li><a href="">CATEGORY 4</a></li>
          <li><a href="">CATEGORY 5</a></li>
      </ul>
    </div>
</div>

2 Answers
2

Add user contact methods using the user_contactmethods filter in your theme’s functions.php or via a plugin:

User contact method entries are stored in the wp_usermeta table. The URL field is special; it’s stored in the user_url field in the wp_users table.

// Add user contact methods
add_filter( 'user_contactmethods','wpse_user_contactmethods', 10, 1 );
function wpse_user_contactmethods( $contact_methods ) {
    $contact_methods['facebook'] = __( 'Facebook URL', 'text_domain'    );
    $contact_methods['twitter']  = __( 'Twitter URL', 'text_domain' );
    $contact_methods['linkedin'] = __( 'LinkedIn URL', 'text_domain'    );
    $contact_methods['youtube']  = __( 'YouTube URL', 'text_domain' );

    return $contact_methods;
}

Output the links in your template file:

<div class="author-box">
    <div class="author-image">
        <img src="http://blog.blogeto.com/html/images/author_profile.png" alt="">
    </div>

    <div class="author-description">
        <h2>
        <!-- AUTHORS NAME --> <?php the_author(); ?>
        <!-- <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author() ?></a> -->
            <?php 
                // Get the id of the post's author.
                $author_id = get_the_author_meta( 'ID' );

                // Get WP_User object for the author.
                $author_userdata = get_userdata( $author_id );

                // Get the author's website. It's stored in the wp_users table in the user_url field.
                $author_website = $author_userdata->data->user_url;

                // Get the rest of the author links. These are stored in the 
                // wp_usermeta table by the key assigned in wpse_user_contactmethods()
                $author_facebook = get_the_author_meta( 'facebook', $author_id );
                $author_twitter  = get_the_author_meta( 'twitter', $author_id  );
                $author_linkedin = get_the_author_meta( 'linkedin', $author_id );
                $author_youtube  = get_the_author_meta( 'youtube', $author_id  );

                // Output the user's social links if they have values.
                if ( $author_website ) {
                        printf( '<a href="%s"><i class="fa fa-home" aria-hidden="true"></i></a>',
                                esc_url( $author_website )
                        );
                }

                if ( $author_facebook ) {
                        printf( '<a href="%s"><i class="fa fa-facebook" aria-hidden="true"></i></a>',
                                esc_url( $author_facebook )
                        );
                }

                if ( $author_twitter ) {
                        printf( '<a href="%s"><i class="fa fa-twitter" aria-hidden="true"></i></a>',
                                esc_url( $author_twitter )
                        );
                }

                if ( $author_linkedin ) {
                        printf( '<a href="%s"><i class="fa fa-linkedin" aria-hidden="true"></i></a>',
                                esc_url( $author_linkedin )
                        );
                }

                if ( $author_youtube ) {
                        printf( '<a href="%s"><i class="fa fa-youtube" aria-hidden="true"></i></a>',
                                esc_url( $author_youtube )
                        );
                }
            ?>
        </h2>
        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text.   <a href="#">Read More</a> </p>
    </div>
    <div class="author-category">
        <ul>
                <li><a href="">CATEGORY 1</a></li>
                <li><a href="">CATEGORY 2</a></li>
                <li><a href="">CATEGORY 3</a></li>
                <li><a href="">CATEGORY 4</a></li>
                <li><a href="">CATEGORY 5</a></li>
        </ul>
    </div>
</div>

Leave a Comment