How to add an Author Box in Divi with/without Plugin.

Aug 16, 2019 | Divi Tips | 6 comments

Samar Jamil

Hi guys.

In this tutorial, I am going to show you how you can add an author box beneath your blog post content without any plugin. So, first of all, we need a Child theme Installed and active on our site to do all the changes safely. You can download a free blank child theme by clicking here.

After Downloading this free Child theme you should now go to your WordPress Dashboard > Appearance> Themes and then click on Add New.


Now Click on the Upload button and then Choose the Divi Child theme that you’ve downloaded before.


After Installing make sure to activate it as well.

As we are done with the Child theme Installation now it’s time to take action. First of all, go to Theme Customizer Settings.

As we are now in the Theme Customizer so we are going to add some font styling to our Theme. For this go to General Settings and then open up Typography and Do these Changes as shown in this image:

Now grab this Code from here and paste it in your Child theme function.php beneath of this line <?php

 * SamarJ Author Box
 * adds the author box in single posts
 * @package   SamarJ/ SamarJAuthorBox

// exit when accessed directly
if ( ! defined( 'ABSPATH' ) ) {

class  SamarJAuthorBox {

	 * constructor
	function __construct() {
		add_filter( 'the_content', array( $this, 'samar_j_output_author_box' ) );	

	 * append author box html to the content
	 * @return string
	function samar_j_output_author_box( $content ) {
		if ( is_singular('post') ) {
			$de_author_name = get_the_author();
			$de_author_id = get_the_author_meta('ID');
			$de_author_avatar = get_avatar( $de_author_id );
			$de_author_description = get_the_author_meta('description');

			$content .= '<div class="samar_j_author_box">';
				$content .= '<div class="samar_j_author_avatar">' . $de_author_avatar . '</div>';
				$content .= '<div class="samar_j_author_bio_wrap">';
					$content .= '<h3 class="samar_j_author_name">' . $de_author_name . '</h3>';
					$content .= '<div class="samar_j_author_bio">' . $de_author_description . '</div>';
					$content .= '<div class="share_title">' . $a = "Share This Post:";
// Outputs: Share This Post!  . '</div>';
					$content .= '<div class="social_share">' .do_shortcode( '[sjSocialShare]' ) . '</div>';
				$content .= '</div>';
			$content .= '</div>';

		return $content;

new  SamarJAuthorBox();

If you want to add Social Sharing on your Post you can paste this code just below the code you pasted in your function.php.

But unfortunately, my Highlighter was not able to recognize the code so you can download code file from here and then paste it in function.php

Don’t know where to paste this Code in function.php. Here is a quick look at how to paste.

After pasting all that Code in your Child theme function.php, have a look at your post page after the main content. Here is how it’s looking 

You might be wondering that there is nothing special in this Author box as there is no any styling applied. But wait, we are going to do it. Now it’s time to add some styling to the Author box. To make it look of some standards.

Now copy this CSS from here and paste it in the Divi > Theme Options and then in the Custom CSS Box.

/* author box */
.samar_j_author_box {
    padding: 40px;
	border: 2px solid #eee;
    margin: 40px auto;    
    overflow: hidden;
    border-radius: 5px;
.samar_j_author_avatar {
    float: left;
    margin-right: 20px;
.samar_j_author_avatar img {
    border-radius: 100%;
	box-shadow: 0px 5px 15px rgba(0,0,0,0.12);
    border: 1px solid #ccc;
.samar_j_author_bio_wrap {
    width: 84%;
    float: left;
@media only screen and ( min-width: 623px ) and ( max-width: 1270px ) {
	.samar_j_author_bio_wrap {width: 76%;}
@media only screen and ( max-width: 622px ) {
	.samar_j_author_bio_wrap {
    	width: 100%;
    	margin-top: 30px;
/* Social Icons */
	list-style-type: none !important;
	padding: 20px 0px 23px !important;
.sj_custom_social_share_shortcode li{
	display: inline-block;margin-right: 20px;
	padding: 0;vertical-align: middle;
.sj_custom_social_share_shortcode li a {
	background: #ffffff;
	text-align: center;
	padding: 5px 10px;
font-size: 20px;
border-radius: 100px;
color: #448aff;
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
transition: 0.5s ease-out;
border: 2px solid #448aff;
.sj_custom_social_share_shortcode li i{
 font-size: 20px;
 .sj_custom_social_share_shortcode li:hover a{
 	background: #448aff;
 	color: #ffffff;

/* Share Title */
margin-top:10px !important;
border-top:2px solid #eee;

After pasting this CSS in the Theme Options now go to your blog post and have a look, you will now have a nicely styles Author Box with Image, Title, Bio and awesome looking Social Share Icons to Share your post.

And that’s it for today hope you have liked it and if you face any problem while pasting codes etc. Make sure to Comment so I will be able to help.

Written by : Samar Jamil


Get Freebies and new blog post notification straight in your inbox!


  1. Herman

    You forgot the step where the childtheme must be activated.

    • Samar Jamil

      Thanks for your informing me I’ll update it soon.

    • Samar Jamil

      Hi Tevya!
      I see your plugin It’s awesome.

  2. Johannes

    Hi Samar, your DL-button for your plugin goes to a local URL, no download possible yet.
    Thank you

    • Samar Jamil

      Hey Johannes.
      Thanks for informing I updated all the links please check again.


Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest

Share This