Create WordPress Author Box With Bootstrap Tutorial

Programming Tutorials – Creating your wordpress author box would give satisfaction to you. In this article I will share how to create wordpress author box with a bootstrap from basic. Many of paid plugin that are used only to show the author’s biography on wordpress, if you can make your own, why should buy 🙂

What is the function of installing the author box wordpress, specifically under the posts? So that we be able to inform visitors about the identity of the blog’s author. The advantage is make your blog more interesting, but it also impressed informative and professional.

Lets begin the tutorial,

 How to Create WordPress Author Box With Bootstrap Tutorial

Surely you already know how to edit your user profile on the wordpress users via the menu > your profile

programming tutorial - how to create wordpress author box with bootstrap 1

To display your photos on wordpress, upload your photo on http://en.gravatar.com/, adjust with the email you put on wordpress (users > your profile)

programming tutorial - how to create wordpress author box with bootstrap step by step

Then enter the settings menu on settings > discussion to change the gravatar logo

programming tutorial - how to create wordpress author box with bootstrap 3

Save your settings.

What if you need to add new social profile in the user profile menu as shown below ?

programming tutorial - how to create wordpress author box with bootstrap 2

Add the following function to your theme in function.php

function sgt_add_to_author_profile( $socialprofile ) {
    $socialprofile['rss_url'] = 'RSS URL';
    $socialprofile['google_profile'] = 'Google Plus Profile URL';
    $socialprofile['youtube_profile'] = 'Youtube Profile URL';
    $socialprofile['pinterest_profile'] = 'Pinterest Profile URL';
    $socialprofile['twitter_profile'] = 'Twitter Profile URL';
    $socialprofile['facebook_profile'] = 'Facebook Profile URL';
    $socialprofile['linkedin_profile'] = 'Linkedin Profile URL';
    $socialprofile['instagram_profile'] = 'Instagram Profile URL';
    return $socialprofile;
}
add_filter( 'user_contactmethods', 'sgt_add_to_author_profile', 10, 1);

Save and refresh your user profile page, then the social media profile menu is already to used. In the above functions, I just added some social media profiles such as google, youtube, pinterest, twitter, facebook, linkedin, instagram, if you want to add another, please add yourself according to your tastes.

Then make a social function to display the widget on the page content. Add the following function in function.php

function journalite_author_bio(){
            echo '
<div class="author-bio">';
            echo '
<div class="row">';
            echo '
<div class="col-xs-12 col-sm-2 avatar-photo"><center>';
            echo get_avatar( get_the_author_meta('email'), '90' );
            echo '</center></div>

';
            echo '
<div class="col-xs-12 col-sm-10 author-info ">';
            echo '
<h3 class="author-title">';
            the_author_link(); 
            echo '</h3>

';
            echo '
<div class="content-socmed-author">';
            $rss_url = get_the_author_meta( 'rss_url' );
            if ( $rss_url && $rss_url != '' ) {
                echo '<span class="socmed-author socmed-author-rss"><a href="' . esc_url($rss_url) . '" target="_blank" ><i class="fa fa-rss-square fa-2x"></i></a></span> ';
            }
            $twitter_profile = get_the_author_meta( 'twitter_profile' );
            if ( $twitter_profile && $twitter_profile != '' ) {
                echo '<span class="socmed-author socmed-author-twitter"><a href="'.esc_url($twitter_profile).'" target="_blank" ><i class="fa fa-twitter-square fa-2x"></i></a></span>';
            }
            $youtube_profile = get_the_author_meta( 'youtube_profile' );
            if ( $youtube_profile && $youtube_profile != '' ) {
                echo '<span class="socmed-author socmed-author-youtube"><a href="'.esc_url($youtube_profile).'" target="_blank" ><i class="fa fa-youtube-square fa-2x"></i></a></span> ';
            }
            $facebook_profile = get_the_author_meta( 'facebook_profile' );
            if ( $facebook_profile && $facebook_profile != '' ) {
                echo '<span class="socmed-author socmed-author-facebook"><a href="'.esc_url($facebook_profile).'" target="_blank" ><i class="fa fa-facebook-square fa-2x"></i></a></span>';
            }
            $google_profile = get_the_author_meta( 'google_profile' );
            if ( $google_profile && $google_profile != '' ) {
                echo '<span class="socmed-author socmed-author-gplus"><a href="'.esc_url($google_profile).'" target="_blank" ><i class="fa fa-google-plus-square fa-2x"></i></a></span>';
            }
            $linkedin_profile = get_the_author_meta( 'linkedin_profile' );
            if ( $linkedin_profile && $linkedin_profile != '' ) {
                echo '<span class="socmed-author socmed-author-linkedin"><a href="'.esc_url($linkedin_profile).'" target="_blank" ><i class="fa fa-linkedin-square fa-2x"></i></a></span>';
            }
            $pinterest_profile = get_the_author_meta( 'pinterest_profile' );
            if ( $pinterest_profile && $pinterest_profile != '' ) {
                echo '<span class="socmed-author socmed-author-pinterest"><a href="'.esc_url($pinterest_profile).'" target="_blank" ><i class="fa fa-pinterest-square fa-2x"></i></a></span>';
            }
            $instagram_profile = get_the_author_meta('instagram_profile');
            if ( $instagram_profile && $instagram_profile != '' ) {
                echo '<span class="socmed-author socmed-author-instagram"><a href="'.esc_url($instagram_profile).'" target="_blank" ><i class="fa fa-instagram fa-2x"></i></a></span>';
            }                    
            echo '</ul>

';
            echo '</div>

';
            echo '

';
            the_author_meta('description');
            echo '

';

            echo '</div>

';
            echo '</div>

';

            
            echo '</div>

';
        }

A little explanation :

From the code above, we can show the author box gravatar with this cript below

get_avatar( get_the_author_meta('email'), '90' );

Then  to show the social media profile we can use script like this

get_the_author_meta( 'rss_url' ); // show rss url

To enhance the author box, need to add css on your theme, add the following css script in style.css in your theme

.author-bio{
    border-top: 2px solid    #404040;
    border-bottom: 2px solid    #404040;
    margin: 5px;
    margin-top: 35px;
    padding: 10px;
    padding-left: 5px;
}
.author-bio p{
margin-bottom: 0px;
}
.avatar-photo{
    margin-bottom: 5px;
    padding-right: 0px;
    padding-left: 0px;

}
.avatar{
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    border:1px solid #404040;
    padding: 3px;
}
.author-title{
    margin-top:0px; 
    margin-left: 0px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
}
.author-title a{
    color: #404040;
}
.socmed-author{
    padding-bottom: 5px;
}
.content-socmed-author{
        margin-bottom: 10px;

}
.socmed-author{
    margin-right: 3px;
}
.socmed-author  a:hover{
    color: #404040;
}
.socmed-author-twitter a{
    color:#00aced
}
.socmed-author-rss a{
    color:#ff6600;
}
.socmed-author-facebook a{
    color :#3b5998;
}
.socmed-author-gplus a{
    color :#d34836
}
.socmed-author-instagram a{
    color :#517fa4;
}
.socmed-author-linkedin a{
    color: #007bb6;
}
.socmed-author-pinterest a{
    color: #cb2027;
}
.socmed-author-youtube a{
    color: #bb0000;
}

Author box function is ready to use, to use the above functions on your article pages, add the following code on your article pages at single.php

if ( function_exists('journalite_author_bio') ) {
                 journalite_author_bio();
            }

Save and see the results, then the author box you will appear as follows

programming tutorial - easy way create wordpress author box step by step

programming tutorial - create wordpress author box with bootstrap framework

Thus my article about create wordpress author box with bootstrap tutorials, may be useful

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: