Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

🏠 » Wordpress » Create Wordpress Author Box With Bootstrap Tutorial

Create WordPress Author Box With Bootstrap Tutorial

By ∙ ∙ Wordpress ∙ 5 Comments

Share : TwitterFacebookTelegramWhatsapp

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

Related Articles :

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

1
2
3
4
5
6
7
8
9
10
11
12
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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

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

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

1
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
.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

1
2
3
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

Another WordPress Related Post :

Reader Interactions

Comments

  2. Parse error: syntax error, unexpected ‘ ‘ (T_STRING) in /home/deniztas/sac-ekimi.deniz-tasarim.site/wp-content/themes/html5blank-stable22/functions.php on line 41
    Site teknik zorluklarla karşılaşıyor.

    i . ibb.co /0mpB0Zk/ss1.png

    when i add the code to function.php, the error appears

    Reply

  3. i dont know php so i did copy-paste all of the function code. i cant control it.my php version is latest version.my info is not more than this.so what must i do?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.