Share:
       
   

Hello Guys in this article today we learn how to create Author Info Box on WordPress Post without Plugins.

Its simply to use for your WordPress Post area. Author Info Box will appear after WordPress post.

Without Plugin use you create Author info box section in your single post in WordPress Theme.

Just follow my step below:

Copy and paste code in functions.php file.

//***show author info on post----

function wpb_author_info_box( $content ) {
  
global $post;
  
// Detect if it is a single post with a post author
if ( is_single() && isset( $post->post_author ) ) {
  
// Get author's display name 
$display_name = get_the_author_meta( 'display_name', $post->post_author );
  
// If display name is not available then use nickname as display name
if ( empty( $display_name ) )
$display_name = get_the_author_meta( 'nickname', $post->post_author );
  
// Get author's biographical information or description
$user_description = get_the_author_meta( 'user_description', $post->post_author );
  
// Get author's website URL 
$user_website = get_the_author_meta('url', $post->post_author);
  
// Get link to the author archive page
$user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author));
   
if ( ! empty( $display_name ) )
  
$author_details = '<h3 class="author_name">About ' . $display_name . '</h3>';
  
if ( ! empty( $user_description ) )
// Author avatar and bio
  
$author_details .= '<p class="author_details">' . get_avatar( get_the_author_meta('user_email') , 90 ) . nl2br( $user_description ). '</p>';
  
$author_details .= '<p class="author_links"><a class="btn btn-sm btn-default" href="'. $user_posts .'">View all posts by ' . $display_name . '</a>';  
  
// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {
  
// Display author website link
$author_details .= ' | <a class="btn btn-sm btn-default" href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></p>';
  
} else { 
// if there is no author website then just close the paragraph
$author_details .= '</p>';
}
  
// Pass all this info to post content  
$content = $content . '<footer class="author_bio_section" >' . $author_details . '</footer>';
}
return $content;
}
  
// Add our function to the post content filter 
add_action( 'the_content', 'wpb_author_info_box' );
  
// Allow HTML in author bio section 
remove_filter('pre_user_description', 'wp_filter_kses');

Using Author Info Box section to add in your custom WordPress Theme without Plugins

After inserting code in functions.php then you need to add CSS code in style.css file just copy and paste code in style.css file

.author_bio_section{
    background-color: #000000;
    padding: 15px 15px 0;
    color: #fff;
    margin: 20px 0;
}
  
.author_name{
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
}
p.author_details{
    display: flex;
    align-items: center;
    gap: 18px;
    color: #fff!important;
}
p.author_links {
    background: #012f99;
    margin-bottom: 0;
}
p.author_links a{
    color:#fff;
    font-size:18px;
}
p.author_links a:hover{
    color:#fff;
}
.author_details img {
    border: 2px solid #fff;
    /* border-radius: 50%; */
    float: left;
    margin: 0 10px 10px 0;
    height: 134px;
    object-fit: cover;
    width: 125px;
}

You have successfully added you author info box section in single post of WordPress please see Output Preview below screen.

WordPress Author Info Box

Get top bootstrap interview Questions to click on below link button.

About Raka Rocks

Hi, My self Raka Rocks. I am web designer and Front End Developer total 8 year exp. in this fields. I am a continuous blogger and has blogged on different topics. He loves to surf the Internet and always tries to get new ideas about new technologies and innovations and share this excellent information with all technology lovers.

Leave a Reply

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