How to add a bio to your blog posts?

Published on 11/01/2019 | 0 comments

The Divi theme does not natively allow you to add an author's bio at the end of blog posts. If your blog has a variety of writers (or even if you're the only one), you might want to display a small bio at the end of each post. In this tutorial, I'll explain two ways to add an "author box" to your posts: with or without a plugin.

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and the sponsored links are in pink.

 

Method 1: Add a bio at the end of your articles with Simple Author Box

plugin simple author box

Easily add an author bio with the "Simple Author Box" plugin

Simple Author Box is a freemium plugin whose free version is already more than enough to add a nice author box at the end of your articles.

The appearance of the author boxes is configurable from the general settings of the plugin. Many options are available.

From their profile, each user (administrator, editor, contributor, author...) will be able to easily add the social networks they use.

Here's how to do it:

 

1. Install and activate Simple Author Box

As usual, go to the Extensions > Add tab and type Simple Author Box in the search field. Install it and activate it.

 

2. Make the settings of the plugin

You will see a new tab appear in the left sidebar of your administration screen: Simple Author. This is where you can start customizing your author boxes.

Simple Author Réglages

  • The SETTINGS tab: here you can decide whether or not to display the "author box", the email, the opening in a new tab, the icons etc.
  • The APPEARANCE tab: here you can customize the margins, choose the appearance of the photo (round or square) and decide on the appearance of the social network icons.
  • The COLORS tab: here, everything is customizable. You can change the color of the "author box", the background of the icons, the links, the text etc...
  • The TYPOGRAPHY tab: here you can define the typeface of titles, text etc. You will have the choice in the catalog of Google Fonts.

 

3. Add social network icons to author bio

Customiser son profil-auteur

The second part of setting up Simple Author Box is in your profile settings.

  1. On the Users > Your Profile tab, you can:
  2. Enter your bio. This is native in WordPress, you don't need this plugin to enter your bio. But if you want your "author box" to have an impact, be sure to fill in this field.
  3. Add an illustration to your profile. This is automatic if you use Gravatar.
  4. If you are not using a Gravatar profile, Simple Author Box allows you to upload an image to illustrate your profile.
  5. Finally, you can add as many social icons as you need. Don't forget to fill in the URL of each of your profiles.

 

4. Check the result

Once you have made your settings and customizations, you will be able to see your bio appear at the end of each of your articles.

Symbols" type icons

 

Colored - Circle" type icons

 

Colored - Square - Long shadow effect" type icons

 

5. Advantages and disadvantages of this method

This method is ideal if you maintain a multi-author blog. This way, each writer will be able to customize their profile via the Users > Your Profile tab.

If you are the only editor of your blog, is it really necessary to add such a plugin? Maybe because it's easy to use and the rendering is pretty good... If not, you have an alternative: coding your bio at the bottom of each article...

 

Method 2: Add a bio at the end of your articles without a plugin

The Simple Author Box plugin offers so many possibilities that I'm not sure you need or want to use the no plugin method. Here, you'll have to get your hands in the code and get creative to optimize the look of your author box using CSS... But why not?

Here's what you'll need to do:

 

1. Modifying the single.php in a child theme

For this method without plugin, you will need, first of all, to create a Divi child theme.

Next, you will need to:

  • copy the single.php file from the parent theme and paste it into your child theme.
  • edit this single.php file with a text editor like SublimText for example (or Bracket)
  • add - after line 142 of single.php - this piece of code:

 



				


 

Please note: all red links in the above code must be replaced with your own social network links.

 

Code à ajouter dans le single.php

Code to add in single.php - after line 142

 

2. Add CSS to improve the appearance of the author box

Finally, once the code is inserted in the right place in your single.php file, you can improve the appearance with a little CSS. For my example, here is the CSS code I used:

.ad-author-box {
border: 2px solid;
padding: 30px 30px 60px 30px;
margin-top: 60px;
box-shadow: 5px 5px 0px 0px #e1e1e1 !important;
}

.ad-author-title {
margin-bottom: 20px;
}

.ad-author img{
float: left;
margin-right: 20px;
border-radius: 50%;
box-shadow: 3px 3px 0px 0px #e1e1e1 !important;
}

.ad-icon-author{
padding-top: 45px !important;
background-color: #ffffff;
padding-right: 20px !important;
}

This CSS code must be added to the Appearance > Customize > Additional CSS tab or to the Divi > Theme options > General tab (at the bottom of the page).

 

3. Check the result

ajouter bio auteur sans plugin

Once you have modified the single.php and added the CSS, you should see an author biography at the end of each of your posts looking like the screenshot above. If you don't like the design, you can easily modify it with CSS.

 

4. Advantages and disadvantages of this method

This method is ideal if (and only if) you are the only editor of your blog and you don't want to burden your site with an additional plugin. However, Simple Author Box does the job well... to be seen...

 

Discover the Divi theme now!

 

In conclusion...

You've seen how easy it is to add an author bio at the end of your articles. Is it really necessary? No... Is it interesting? Yes.

Indeed, putting the author forward can be interesting because it humanizes the article. The user sees that there is a real human behind a blog post, it creates interest, interaction ... and this is always good. In addition, it will allow you to put yourself forward because not all users take the trouble to visit your "About" page.

Comment ajouter une bio à la fin de vos articles WordPress / Divi ?

 

How to add an author box at the end of your blog post ?

1,292 words

5

You should like it too:

Product Carousel pour Divi et WooCommerce

Product Carousel for Divi and WooCommerce

If you're looking for a way to scroll through your WooCommerce store's products in a stylish carousel, the "Product Carousel" extension can help. It's quick and easy to use, and the results live up to expectations.

Popups for Divi : un plugin gratuit très malin !

Popups for Divi: a smart free plugin!

Free plugins for Divi are pretty rare, but "Popups for Divi" is pretty effective and easy to use. This plugin converts any Divi section into a popup. I explain how to use it.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This