• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

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

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Wordpress » Create Wordpress Author Box With Bootstrap Tutorial

Create WordPress Author Box With Bootstrap Tutorial

By Sigit Prasetya Nugroho ∙ August 21, 2015 ∙ 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,

Table of Contents

  • 1  How to Create WordPress Author Box With Bootstrap Tutorial
    • 1.1 Thus my article about create wordpress author box with bootstrap tutorials, may be useful

 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 :

  • Custom Avatar in Fancier Author Box Free

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 :

  • How To Create The Fastest Social Share Button WordPress Without Plugin
  • Create WordPress Slider Without Javascript
  • The Point Responsive WordPress Theme For Blogging
  • The Doctors Free WordPress Responsive Theme For Medical
  • Develop Your Site With Start Blogging The Responsive WordPress Theme
  • Zerius Theme The Free WordPress Responsive Theme

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for AnthonyAnthony says

    January 2, 2018 at 10:53 pm

    Terrible code…

    10,000 mistakes minimum.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      January 3, 2018 at 1:43 am

      Yes, you are the best. If you have good knowledge please advise me the “great teacher”, not just criticism. Thanks. GBU 🙂

      Reply
  2. Avatar for muratmurat says

    July 18, 2019 at 3:19 pm

    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
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      July 19, 2019 at 2:15 am

      i don’t see the error in your code.. please check again your mark ‘ or ” in line 41

      🙂

      Reply
  3. Avatar for muratmurat says

    July 19, 2019 at 6:41 pm

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

Primary Sidebar

Welcome to my Home,

Avatar for muratThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com