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
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)
Then enter the settings menu on settings > discussion to change the gravatar logo
Save your settings.
What if you need to add new social profile in the user profile menu as shown below ?
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
Thus my article about create wordpress author box with bootstrap tutorials, may be useful
Latest posts by Sigit Prasetya Nugroho (see all)
- Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
- Create WordPress Slider Without Javascript - August 30, 2018
- Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018
Terrible code…
10,000 mistakes minimum.
Yes, you are the best. If you have good knowledge please advise me the “great teacher”, not just criticism. Thanks. GBU 🙂