• a

NEW & POPULAR DIVI CHILD THEMES

Molti

Molti Ecommerce

Molti LMS

Florence

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

RESOURCES

Our Blog

Customer Showcase

What's New?

Useful Tools

Affiliates

NEW & POPULAR DIVI CHILD THEMES

Molti

Multipurpose Business Child Theme for Divi.

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Molti LMS

Multipurpose LMS/Business Child Theme for Divi & LearnDash.

Florence

A Delicate & Innocent Business Child Theme for Divi.

WANT MORE?

Join Our Membership

Get access to all our Divi Products by Joining Membership!

Membership Benefits

See the Benefits of Joining Membership before you Join!

Send us a Message

Need Help? Send us a Message and we'll be glad to help.

Visit Documentation

Instead of waiting for us, try to find your answer in our Documentation.

Our Blog

See the Latest News, Divi Tips & Tricks and a lot more.

Useful Tools

Some Useful Divi & Web Design Tools that we use and you'll love.

Customer Showcase

See cool websites made by our Customers using our Child Themes.

Affiliates

Earn Money while Promoting our Products today.

What's New?

See what we've been working on and what's new from us.

How to Easily Add an Author Box in Divi without any Plugin!

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.

Download the Free Child theme

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' ) ) {
	exit;
}

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

Download The Text File

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;
    width:80px;
    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 */
.sj_custom_social_share_shortcode{
	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 */
.share_title{
margin-top:10px !important;
font-size:23px;
font-weight:500;
font-family:Nunito;
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 styled 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.

Share The Love ❤️

Written by: Samar Jamil

I Love to make beautiful and creative Divi Child Themes, Layouts and Module Designs for everyone to help them create beautiful websites with ease using Divi. I also Enjoy making helpful Divi Tutorials, Freebies, and More!
⚡ Flash Sale - Get a Massive 30% Off All Divi Products & Membership Plans for a Limited Time Only.
⚡ Flash Sale