What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Add Author Box in WordPress to Show Author Name and Photo?

How to Add Author Box in WordPress to Show Author Name and Photo?

Showing authors’ information in WordPress posts can increase the reliability of the post content and the fame of a website as well. Thus, many large and reputable sites choose to display author information including pictures, name, and a brief introduction. In this way, visitors will know who write the post and whether the writer’s writing style is favorable or not. If visitors love one of those writers, they may become subscribers of the website.

Adding author introduction on posts can not only show how responsible a website is, but also can bring real benefits to site development. There are many methods to add author information, among which the easiest and most effective one is adding an author box. In the following, our writers comprehensively explain how to add author box in WordPress posts with simple steps.

Author Box

Add Author Information Box with Codes

Author box is somewhere you can display author information including name, photos, links, as well as introduction. However, WordPress doesn’t offer an author box by default. Thus, you need to build one yourself. One of the easiest and room-saving ways to achieve the goal is to use codes. Our considerate editors prepare all needed codes in below to help readers.

Firstly, add the following codes to your style.css in the theme folder.

add author box style

Next, add the code in below into your single.php file.

add author box

After adding all these codes, you successfully embed an author box on your WordPress websites. Then, you just make little changes to the codes and add author name and image to it with the help of Gravata.

Showcase WordPress Author Box at the End of Blog Posts with Plugin

As the reading habit of most readers is from the top section to the bottom section, we highly recommend you to showcase the author box at the end of each blog posts. In this case, when people finish reading, they can know who the content writer is naturally. To achieve this, you can surely edit the CSS code of your current template like what we introduced above, but for common webmasters, we personally suggest the utilization of Simple Author Box plugin.

This plugin is a user-friendly option that can display a responsive author box on your posts, showing the author name, website, social icons, gravatar, website URL and many more. It adds more than 30 social profiles on the user profile screen and can achieve the nice looking on the tablet, laptop, desktop and smart phone effectively.

Now, you can check the below steps to figure out how to use it.

Configure the General Options

Upon the successful installation of this great plugin, you need to navigate to the WordPress Settings tab to click the Simple Author Box button for plugin configurations. Here, you need to complete 4 main settings and let’s start from the General Settings.

By default, the author box is showcased automatically at the end of your articles. However, you can also decide to display it in a manual way by using the exclusive code snippet showcased in the below screenshot in your template file. Do not forget to decide the top margin and the bottom margin of the box.

Insert Author Box Manually

Now, you can decide the display of author information. For instance, you can hide the box if the author information is empty, determine the author image style between the options of Square and Circle, and decide whether to add the rotating effect on the avatar hover.

Author Images

In addition, if some of your authors have their exclusive personal websites or blogs, you can also display their website information. Here, you need to decide the website position between the left side or the right side, whether to open the link in a new tab and whether to add a “nofollow” contribute.

Showcase Author Websites

The last option for general setting is for the showcase of social icons. For this aspect, you need to determine the icon style, type, rotate effect, shadow effect, thin border display and many more. All can be decided based on your preference.

Social Icons

Set Up the Color Options

The next part is to set up the color options for the author box, which include the aspects of author name, website URL, border color, background color and social icon. You can choose your preferred ones from the right-hand color pickers.

Color Options

Decide the Typography Options

In addition to the color, you also need to decide the typography of your author box for the better showcase, such as the font family of author name, website and general introduction. Even, the font size needs to be pre-determined properly.

Typography Options

Determine Two Miscellaneous Options

Lastly, you should configure two miscellaneous options based on your true needs. If your activated theme or plugins have the Font Awesome stylesheet, you can prevent the stylesheet from being loaded. In addition, if one of your plugins optimizes your CSS delivery, you can choose to load the generated inline styles to the footer section for the better performance.

Miscellaneous Options

As everything is configured properly, now, you can navigate to the Users tab to edit the profile of the current users for names, descriptions, personal websites, contact information and many more. The final result just looks like as below.

Author Box

Showcase WordPress Author Box in the Sidebar

Also, it is possible that you do not want to display the author box at the end of your articles but in the sidebar section based on the overall design of your webpage. In this case, you can leverage the Smart Author Widget.

After installing it, you only need to go to the Appearance tab for clicking the Widgets button. Then, you can find the special Smart Author widget and simply drag it to your sidebar.

Here, you need to decide a few settings for this widget, such as the widget title, author avatar size, displayed information of authors and many more. In addition, if you have multiple authors, you need to enable the function of automatic author detection, thus, the plugin will detect the right author for your blog posts for the correct display.

Smart Author Widget

Add Author Information Box with Other Plugins

In the following, our editors pick out several other plugins to help webmaster add user box on their WordPress websites without any hassle. Note that we choose those plugins based on rich experiences, user feedbacks, as well as real testing.

Fancier Author Box by ThematoSoup

The plugin helps to build an author box to put all the author information. The box presented by this plugin is unique enough to attract all levels of visitors and engage them into social media. Every user can choose where to put the plugin: posts, pages, or custom post types. Of course, you can also decide the exact position of the box: above, below, or both.

Fancier Author Box by ThematoSoup

WP Author Box Lite

WP Author Box Lite gives identity to all your articles such as pages, posts, and custom types. It shows not only the author information, but also the latest post written by the same writer. In this way, you can maintain visitors for longer time. Considering there are an increasing number of mobile users, the plugin can automatically adjust itself to look good on tablet, laptop, mobile phone, as well as desktop.

Another highlight about the plugin is that it automatically adds Google authorship with Google+ profile link and Facebook authorship with Facebook profile link. What’s more, to meet different demands of various users, WP Author Box Lite is fully customizable with color options.

WP Author Box Lite

Guerrilla’s Author Box

The plugin automatically adds author box at the end of website posts, which displays author introduction, website links, author name, as well as avatar powered by Gravatar. The designers of Guerrilla’s Author Box always keep it up-to-date and as a result, it is now compatible with WordPress 3.9.1.

Guerrilla’s Author Box

Social Author Bio

Social Author Bio adds both author box and social icons on your website. The former helps to introduce the author while the latter contributes to promoting website fame. The plugin is also customizable that enables users to adjust avatar size, choose a location, and decide the number of custom links.

Social Author Bio

Author

Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *