{"id":4875,"date":"2009-12-09T07:00:24","date_gmt":"2009-12-09T12:00:24","guid":{"rendered":"http:\/\/www.casadeblundell.com\/jonathan\/?p=4875"},"modified":"2009-12-07T22:19:51","modified_gmt":"2009-12-08T03:19:51","slug":"add-authors-bio-to-wordpress-posts","status":"publish","type":"post","link":"http:\/\/casadeblundell.com\/jonathan\/add-authors-bio-to-wordpress-posts\/","title":{"rendered":"Add an author&#8217;s bio to WordPress posts"},"content":{"rendered":"<p><a href=\"http:\/\/www.casadeblundell.com\/jonathan\/wp-content\/uploads\/bio.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.casadeblundell.com\/jonathan\/wp-content\/uploads\/bio-300x70.png\" alt=\"bio\" title=\"bio\" width=\"300\" height=\"70\" class=\"alignnone size-medium wp-image-4877\" srcset=\"http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/bio-300x70.png 300w, http:\/\/casadeblundell.com\/jonathan\/wp-content\/uploads\/bio.png 612w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>For one of my clients, they&#8217;ve requested author level permissions for all the members in their organization. This could become a huge headache &#8212; very quickly &#8212; or if managed correctly, a highly effective communication tool.<\/p>\n<p>With every member writing and commenting, it can become hard to know who&#8217;s writing what, or what context they&#8217;re coming from, so I wanted to add a brief author&#8217;s bio to the end of each post.<\/p>\n<p>I wanted something that was easy for everyone to use and update without having to hard code the information somewhere. And after a quick Google search I realized you can pull a user&#8217;s\/author&#8217;s information straight off of their User Profile page in WordPress.<br \/>\n<!--more--><br \/>\nFor this site in particular, I&#8217;m also using the <a href=\"http:\/\/wordpress.org\/extend\/plugins\/register-plus\/\">Register Plus plugin<\/a> to add additional fields to the user&#8217;s profile information. It not only helps when approving members but will also help add additional context as the users write multiple posts on the site.<\/p>\n<p>Let&#8217;s take a look at the code to begin with&#8230;<\/p>\n<p><code>&lt;div id=&quot;writer&quot;&gt;<br \/>\n&lt;?php echo get_avatar( get_the_author_meta(&#039;user_email&#039;), &#039;80&#039;, &#039;&#039; ); ?&gt;&lt;\/a&gt;<br \/>\n&lt;p&gt;&lt;strong&gt;&lt;i&gt;Article posted by:&lt;\/i&gt; &lt;?php the_author_meta(&#039;display_name&#039;); ?&gt;&lt;\/strong&gt;&lt;br\/&gt;<br \/>\n&lt;strong&gt;College\/Association:&lt;\/strong&gt; &lt;?php the_author_meta(&#039;college_or_law_firm&#039;); ?&gt;&lt;br\/&gt;<br \/>\n&lt;strong&gt;Twitter:&lt;\/strong&gt; &lt;a href=&quot;http:\/\/www.twitter.com\/&lt;?php the_author_meta(&#039;twitter_screen_name&#039;); ?&gt;&quot; target=&quot;_blank&quot;&gt;&lt;?php the_author_meta(&#039;twitter_screen_name&#039;); ?&gt;&lt;\/a&gt;&lt;br\/&gt;<br \/>\n&lt;strong&gt;Website:&lt;\/strong&gt; &lt;a href=&quot;&lt;?php the_author_meta(&#039;user_url&#039;); ?&gt;&quot; target=&quot;_blank&quot;&gt;&lt;?php the_author_meta(&#039;user_url&#039;); ?&gt;&lt;\/a&gt;&lt;br \/&gt;<br \/>\n&lt;strong&gt;Bio:&lt;\/strong&gt; &lt;?php the_author_meta(&#039;description&#039;); ?&gt;&lt;br\/&gt;<br \/>\n&lt;a href=&quot;mailto:&lt;?php the_author_meta(&#039;user_email&#039;); ?&gt;&quot;&gt;Email the author&lt;\/a&gt; | See all posts by &lt;?php the_author_posts_link(); ?&gt; &lt;\/p&gt;<br \/>\n&lt;\/div&gt;<\/code><\/p>\n<p>The key database query here is &#8220;the_author_meta&#8221;. As you can see I used it throughout this short application.<\/p>\n<p>We&#8217;re essentially telling WordPress to look at the author&#8217;s data and then display the information from the field we mention, in between the parenthesis.<\/p>\n<p>i.e.<\/p>\n<p><code>&lt;?php the_author_meta(&#039;user_name&#039;); ?&gt;<\/code><\/p>\n<p>So let&#8217;s break it down&#8230;<\/p>\n<p>You&#8217;ll want to add this on your single.php file, after &#8220;<a href=\"http:\/\/codex.wordpress.org\/The_Loop\">the loop<\/a>&#8221; and probably before the comments begin.<\/p>\n<p>I&#8217;ve wrapped my bio with the DIV ID of &#8220;writer.&#8221;<\/p>\n<p>Next we add a call for the gravatar.<\/p>\n<p><code>&lt;?php echo get_avatar( get_the_author_meta(&#039;user_email&#039;), &#039;80&#039;, &#039;&#039; ); ?&gt;&lt;\/a&gt;<\/code><\/p>\n<p>This will pull the image from the <a href=\"http:\/\/www.gravatar.com\">Gravatar site<\/a> that&#8217;s associated with the author&#8217;s e-mail address.<\/p>\n<p>Next we start pulling the bio information.<\/p>\n<p>Here&#8217;s the author&#8217;s name:<\/p>\n<p><code>&lt;p&gt;&lt;strong&gt;&lt;i&gt;Article posted by:&lt;\/i&gt; &lt;?php the_author_meta(&#039;display_name&#039;); ?&gt;&lt;\/strong&gt;&lt;br\/&gt;<\/code><\/p>\n<p>Next, their college\/association and their Twitter user name (these are fields I added with the Register Plus plugin):<\/p>\n<p><code>&lt;strong&gt;College\/Association:&lt;\/strong&gt; &lt;?php the_author_meta(&#039;college_or_law_firm&#039;); ?&gt;&lt;br\/&gt;<br \/>\n&lt;strong&gt;Twitter:&lt;\/strong&gt; &lt;a href=&quot;http:\/\/www.twitter.com\/&lt;?php the_author_meta(&#039;twitter_screen_name&#039;); ?&gt;&quot; target=&quot;_blank&quot;&gt;&lt;?php the_author_meta(&#039;twitter_screen_name&#039;); ?&gt;&lt;\/a&gt;&lt;br\/&gt;<\/code><\/p>\n<p>Next comes the author&#8217;s website:<\/p>\n<p><code>&lt;strong&gt;Website:&lt;\/strong&gt; &lt;a href=&quot;&lt;?php the_author_meta(&#039;user_url&#039;); ?&gt;&quot; target=&quot;_blank&quot;&gt;&lt;?php the_author_meta(&#039;user_url&#039;); ?&gt;&lt;\/a&gt;&lt;br \/&gt;<\/code><\/p>\n<p>And finally their actual bio &#8211; written by them &#8211; and like all the other information, updatable whenever they choose:<\/p>\n<p><code>&lt;strong&gt;Bio:&lt;\/strong&gt; &lt;?php the_author_meta(&#039;description&#039;); ?&gt;&lt;br\/&gt;<\/code><\/p>\n<p>But we still have one more line of text left. This one may be a bit trickier if you&#8217;re not familiar with PHP. But we&#8217;re going to link to the author&#8217;s email without displaying it. We&#8217;re also going to provide a link to all the posts by that author. <\/p>\n<p>So here&#8217;s the code:<\/p>\n<p><code>&lt;a href=&quot;mailto:&lt;?php the_author_meta(&#039;user_email&#039;); ?&gt;&quot;&gt;Email the author&lt;\/a&gt; | See all posts by &lt;?php the_author_posts_link(); ?&gt; &lt;\/p&gt;<\/code><\/p>\n<p>What we did was simply build a basic mailto: link but instead of hard coding an email address, we&#8217;ve asked WordPress to insert the author&#8217;s email address as part of the link.<\/p>\n<p>And last of all, we&#8217;ve thrown in a slightly different query, &#8220;the_author_posts_link&#8221; which will pull up a list of all the articles written by that author.<\/p>\n<p>Of course&#8230; don&#8217;t forget to close out your DIV! After that we&#8217;re all done! Now on to the styling.<\/p>\n<p>There are a number of other strings you can use with &#8220;the_author_meta&#8221; tag. Here&#8217;s a few built into WordPress right out of the box.<\/p>\n<ul>\n<li>\nuser_login<\/li>\n<li>user_pass<\/li>\n<li>user_nicename\n<\/li>\n<li>user_email<\/li>\n<li>user_url\n<\/li>\n<li>user_registered<\/li>\n<li>user_activation_key<\/li>\n<li>user_status<\/li>\n<li>display_name<\/li>\n<li>nickname<\/li>\n<li>first_name<\/li>\n<li>last_name<\/li>\n<li>description<\/li>\n<li>jabber<\/li>\n<li>aim<\/li>\n<li>yim<\/li>\n<li>user_level<\/li>\n<li>user_firstname<\/li>\n<li>user_lastname<\/li>\n<li>user_description<\/li>\n<li>rich_editing<\/li>\n<li>comment_shortcuts<\/li>\n<li>admin_color<\/li>\n<li>plugins_per_page<\/li>\n<li>plugins_last_view<\/li>\n<li>ID<\/li>\n<\/ul>\n<p>For more info what you can do with the &#8220;the_author_meta&#8221; tag, check out the <a href=\"http:\/\/codex.wordpress.org\/Template_Tags\/the_author_meta\">WordPress Codex.<\/a><\/p>\n<p>The styling is simple CSS and can be pasted into your CSS Stylesheet. I&#8217;ll share the code that I used with you and let you customize it however you want.<\/p>\n<p>Enjoy!<\/p>\n<h2>CSS code<\/h2>\n<p><code>#writer {<br \/>\n\tbackground:#eef5e1;<br \/>\n\tmargin:25px 0 25px 0;<br \/>\n\tpadding:12px;<br \/>\n        overflow: hidden;<br \/>\n\t}<\/code><\/p>\n<p><code>#writer img.avatar avatar-80 photo {<br \/>\n\tpadding:1px;<br \/>\n\tborder:1px solid #7da939;<br \/>\n\tfloat:left;<br \/>\n\twidth:80px;<br \/>\n\t}<\/code><\/p>\n<p><code>#writer span {<br \/>\n\tdisplay:block;<br \/>\n\tpadding-top:4px;<br \/>\n\tborder-top:1px solid #cbd8b4;<br \/>\n\tmargin-top:12px;<br \/>\n\t}<br \/>\n<\/code><br \/>\n<code>#writer p {<br \/>\n\tmargin:0;<br \/>\n\twidth:482px;<br \/>\n        float:right;<br \/>\n\t}\t<\/code><\/p>\n<p><strong>How are you putting this idea into practice? How do you think you might use something like this in the future?<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>For one of my clients, they&#8217;ve requested author level permissions for all the members in their organization. This could become a huge headache &#8212; very quickly &#8212; or if managed correctly, a highly effective communication tool. With every member writing and commenting, it can become hard to know who&#8217;s writing what, or what context they&#8217;re &hellip; <a href=\"http:\/\/casadeblundell.com\/jonathan\/add-authors-bio-to-wordpress-posts\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Add an author&#8217;s bio to WordPress posts<\/span><\/a><\/p>\n","protected":false},"author":84,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[12],"tags":[2784,1464,2783,2785,2786,1184],"class_list":["post-4875","post","type-post","status-publish","format-standard","hentry","category-techno","tag-authors","tag-automatic","tag-bio","tag-the_author_meta","tag-the_author_posts_link","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pEnSo-1gD","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/posts\/4875","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/comments?post=4875"}],"version-history":[{"count":0,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/posts\/4875\/revisions"}],"wp:attachment":[{"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/media?parent=4875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/categories?post=4875"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/casadeblundell.com\/jonathan\/wp-json\/wp\/v2\/tags?post=4875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}