{"id":41760,"date":"2024-11-24T12:38:40","date_gmt":"2024-11-24T10:38:40","guid":{"rendered":"https:\/\/coma.lv\/2024\/11\/24\/how-to-add-an-author-info-box-to-wordpress-posts\/"},"modified":"2024-11-24T12:38:40","modified_gmt":"2024-11-24T10:38:40","slug":"how-to-add-an-author-info-box-to-wordpress-posts","status":"publish","type":"post","link":"https:\/\/coma.lv\/en\/2024\/11\/24\/how-to-add-an-author-info-box-to-wordpress-posts\/","title":{"rendered":"How to Add an Author Info Box to WordPress Posts"},"content":{"rendered":"\n

An author bio box is a small area where you can display information about the post author, with links to your site and social media profiles. In this article we will show you how to do it.<\/p>\n

When and Why You Need an Author Bio Box<\/h2>\n

Being able to see who is behind the articles helps increase trust in and authority of the site among other users. For single-author sites you can simply add an \u201cAbout me\u201d page. However, for multi-author blogs you will need to add an author info box under every post. This box encourages authors to engage with their readers and gives authors extra incentive to build a following. If you accept guest posts, an author info box can attract more people to you.<\/p>\n

There are many ways to add an author info box and we will show you two methods so that you can choose what suits your site best.<\/p>\n

Method One: An Author Box in Posts with a Plugin<\/h2>\n

Many site owners want to display author information at the end of a post. First install and activate the Molongui Authorship plugin. Every author on your site will need to add their own information. They can do this by logging in to their WordPress account and clicking the Authors \u2013 Add New link in the WordPress admin.<\/p>\n

\"WordPress\"<\/p>\n

As the site administrator, you can fill in this information yourself by editing each user profile. To do this, go to the Users > All Users or Authors > All Authors page and click the edit link under each user whose profile you want to edit.<\/p>\n

\"WordPress\"<\/p>\n

Now you can open any WordPress post on your site and you will see the author info box at the bottom of the post.<\/p>\n

\"WordPress\"<\/p>\n

To add or change a post’s author, create or edit a post. Scroll to the Authors section in the right sidebar. Click \u201c+\u201d and choose an author from the list. You can add one or several authors and arrange them in order.<\/p>\n

Customizing the Author Info Box Display<\/h3>\n

You can personalize the look and content of the Molongui Authorship author box to match your site’s design. Go to Authors > Author Box Editor. Choose the design, layout, colors and the information to display. If you want to customize it even more and feel confident working with CSS, you can add and edit your own CSS code on the Advanced tab.<\/p>\n

\"WordPress\"<\/p>\n

Additional features are available in the premium version, Molongui Authorship Pro.<\/p>\n

Method Two: Author Information in a Sidebar Widget for Single Posts<\/h2>\n

The method above is good if you want author information to appear under posts. However, the free version of Molongui Authorship does not let you display the author box in the WordPress sidebar; this feature is available only in the Pro version of the plugin. To display the author bio in the sidebar or any widget area, you can use the Meks Smart Author Widgets plugin. After installing and activating it, go to the Appearance \u2013 Widgets page. You will see Meks Smart Author in the list of available widgets. Add it to the sidebar where you want to display the author information.<\/p>\n

\"WordPress\"<\/p>\n

The widget has a bunch of settings. The most important one, next to which you need to tick the box, is Automatically detect author.<\/p>\n

\"WordPress\"<\/p>\n

Save the settings and go to the site to see the plugin in action. This plugin also collects information from author profiles, so your authors will also need to fill in their bio.<\/p>\n

\"WordPress\"<\/p>\n

Method Three: Adding an Author Info Box with Code<\/h2>\n

Both of the methods above were based on using plugins. If for some reason you need to add an author info box manually, here is how you can do it. First you will need to add code to the functions.php file:<\/p>\n

\r\nfunction wpb_author_info_box( $content ) {\r\n\r\n    global $post;\r\n\r\n    if ( is_single() &amp;&amp; isset( $post-&gt;post_author ) ) {\r\n\r\n        $author_details = &#039;&#039;;\r\n\r\n        $display_name = get_the_author_meta( &#039;display_name&#039;, $post-&gt;post_author );\r\n\r\n        if ( empty( $display_name ) ) {\r\n            $display_name = get_the_author_meta( &#039;nickname&#039;, $post-&gt;post_author );\r\n        }\r\n\r\n        $user_description = get_the_author_meta( &#039;user_description&#039;, $post-&gt;post_author );\r\n        $user_website     = get_the_author_meta( &#039;url&#039;, $post-&gt;post_author );\r\n        $user_posts       = get_author_posts_url( get_the_author_meta( &#039;ID&#039;, $post-&gt;post_author ) );\r\n        $user_email       = get_the_author_meta( &#039;user_email&#039;, $post-&gt;post_author );\r\n\r\n        \/\/ Author name\r\n        if ( ! empty( $display_name ) ) {\r\n            $author_details .= &#039;&lt;h4&gt;About &#039; . esc_html( $display_name ) . &#039;&lt;\/h4&gt;&#039;;\r\n        }\r\n\r\n        \/\/ Always show avatar\r\n        $author_details .= &#039;&lt;div class=&quot;author_avatar&quot;&gt;&#039; . get_avatar( $user_email, 90 ) . &#039;&lt;\/div&gt;&#039;;\r\n\r\n        \/\/ Bio or fallback\r\n        if ( ! empty( $user_description ) ) {\r\n            $author_details .= &#039;&lt;p&gt;&#039; . nl2br( esc_html( $user_description ) ) . &#039;&lt;\/p&gt;&#039;;\r\n        } else {\r\n            $author_details .= &#039;&lt;p&gt;This author has not added a bio yet.&lt;\/p&gt;&#039;;\r\n        }\r\n\r\n        \/\/ Links\r\n        $author_details .= &#039;&lt;p&gt;&lt;a href=&quot;&#039; . esc_url( $user_posts ) . &#039;&quot;&gt;View all posts by &#039; . esc_html( $display_name ) . &#039;&lt;\/a&gt;&#039;;\r\n\r\n        if ( ! empty( $user_website ) ) {\r\n            $author_details .= &#039; | &lt;a href=&quot;&#039; . esc_url( $user_website ) . &#039;&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;Website&lt;\/a&gt;&#039;;\r\n        }\r\n\r\n        $author_details .= &#039;&lt;\/p&gt;&#039;;\r\n\r\n        \/\/ Append to content\r\n        $content .= &#039;&lt;footer class=&quot;author_bio_section&quot;&gt;&#039; . $author_details . &#039;&lt;\/footer&gt;&#039;;\r\n    }\r\n\r\n    return $content;\r\n}\r\n\r\nadd_filter( &#039;the_content&#039;, &#039;wpb_author_info_box&#039;, 99 );\r\n<\/pre>\n
This code simply collects information about the author and displays it at the bottom under WordPress posts. You need to tidy up the info box so that it looks right and matches your theme. You can use this CSS in your theme or stylesheet. You can change it as you like depending on your needs.<\/p>\n
\r\n.author_bio_section{\r\nbackground: none repeat scroll 0 0 #F5F5F5;\r\npadding: 15px;\r\nborder: 1px solid #ccc;\r\n}\r\n\r\n.author_name{\r\nfont-size:16px;\r\nfont-weight: bold;\r\n}\r\n\r\n.author_details img {\r\nborder: 1px solid #D8D8D8;\r\nborder-radius: 50%;\r\nfloat: left;\r\nmargin: 0 10px 10px 0;\r\n}\r\n<\/pre>\n
This is how the author info box looked on our demo site.<\/p>\n
\"WordPress\"<\/p>\n
\n
Our specialization is WordPress website development and maintenance. Contact us for a free consultation \u2014 vadim@coma.lv<\/a>, +371 29394520<\/a><\/em><\/p>\n
\n","protected":false},"excerpt":{"rendered":"
An author bio box is a small area where you can display information about the post author, with links to your site and social media profiles. In this article we will show you how to do it. When and Why You Need an Author Bio Box Being able to see who is behind the articles […]<\/p>\n","protected":false},"author":1,"featured_media":38209,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1225,1407],"tags":[],"class_list":["post-41760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-tutorials"],"_links":{"self":[{"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/posts\/41760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/comments?post=41760"}],"version-history":[{"count":0,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/posts\/41760\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/media\/38209"}],"wp:attachment":[{"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/media?parent=41760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/categories?post=41760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/tags?post=41760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}