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' ) ) {
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
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.
You forgot the step where the childtheme must be activated.
Thanks for your informing me I’ll update it soon.
We built a plugin that easily adds an author box to blog posts on Divi (that don’t use the builder). If people want another simple way to add one they can check it out here: https://wordpress.org/plugins/et-divinizer/
Hi Tevya!
I see your plugin It’s awesome.
Hi Samar, your DL-button for your plugin goes to a local URL, no download possible yet.
Thank you
Hey Johannes.
Thanks for informing I updated all the links please check again.