The Divi theme is a popular WordPress theme that allows you to create beautiful and functional websites. One common feature that many bloggers like to include on their websites is an author box at the end of each blog post. This author box provides information about the author of the post, such as their name, bio, and social media links.
To add an author box to your Divi blog posts, you can use a combination of custom PHP functions and Divi’s built-in modules. Here’s an example of how you can achieve this:
function wpsnippets_divi_author_box() {
$author_id = get_the_author_meta('ID');
$author_name = get_the_author_meta('display_name');
$author_bio = get_the_author_meta('description');
$author_avatar = get_avatar($author_id, 80);
$author_social_links = array(
'facebook' => get_the_author_meta('facebook'),
'twitter' => get_the_author_meta('twitter'),
'instagram' => get_the_author_meta('instagram'),
);
ob_start();
?>
<div class="author-box">
<div class="author-avatar">
<?php echo $author_avatar; ?>
</div>
<div class="author-info">
<h4 class="author-name"><?php echo $author_name; ?></h4>
<p class="author-bio"><?php echo $author_bio; ?></p>
<div class="author-social-links">
<?php foreach ($author_social_links as $social => $link) : ?>
<?php if (!empty($link)) : ?>
<a href="<?php echo esc_url($link); ?>" class="social-link <?php echo $social; ?>" target="_blank" rel="nofollow">
<?php echo ucfirst($social); ?>
</a>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
</div>
<?php
return ob_get_clean();
}
add_shortcode('divi_author_box', 'wpsnippets_divi_author_box');
This code defines a custom PHP function wpsnippets_divi_author_box() that retrieves the necessary author information using WordPress functions like get_the_author_meta() and get_avatar(). It then generates the HTML markup for the author box using the retrieved data.
To display the author box in your Divi blog posts, you can use the [divi_author_box] shortcode. Simply add this shortcode to the desired location within your blog post content, and the author box will be rendered when the post is viewed.
Note: This code assumes that you have already set up the necessary author information in the WordPress user profiles, such as the author’s bio and social media links.
Examples
Example 1: Adding a custom author box to Divi blog posts
This example demonstrates how to add a custom author box to Divi blog posts using a child theme. The author box will display the author’s name, bio, and social media links.
function wpsnippets_divi_author_box() {
global $post;
// Get the author ID
$author_id = $post->post_author;
// Get the author's display name
$author_name = get_the_author_meta('display_name', $author_id);
// Get the author's bio
$author_bio = get_the_author_meta('description', $author_id);
// Get the author's social media links
$author_facebook = get_the_author_meta('facebook', $author_id);
$author_twitter = get_the_author_meta('twitter', $author_id);
$author_instagram = get_the_author_meta('instagram', $author_id);
// Output the author box HTML
echo '<div class="author-box">';
echo '<h4>About the Author</h4>';
echo '<h5>' . $author_name . '</h5>';
echo '<p>' . $author_bio . '</p>';
echo '<ul class="social-media-links">';
echo '<li><a href="' . $author_facebook . '">Facebook</a></li>';
echo '<li><a href="' . $author_twitter . '">Twitter</a></li>';
echo '<li><a href="' . $author_instagram . '">Instagram</a></li>';
echo '</ul>';
echo '</div>';
}
add_action('et_after_post', 'wpsnippets_divi_author_box');
This code adds a custom author box to the end of Divi blog posts. It retrieves the author’s information using the get_the_author_meta() function and outputs the author box HTML using echo. The author’s name, bio, and social media links are displayed within the author box.
Example 2: Customizing the author box appearance
This example demonstrates how to customize the appearance of the author box by adding custom CSS styles.
function wpsnippets_divi_author_box_styles() {
echo '<style>';
echo '.author-box {';
echo ' background-color: #f5f5f5;';
echo ' padding: 20px;';
echo '}';
echo '.author-box h4 {';
echo ' font-size: 18px;';
echo ' margin-bottom: 10px;';
echo '}';
echo '.author-box h5 {';
echo ' font-size: 16px;';
echo ' margin-bottom: 5px;';
echo '}';
echo '.author-box p {';
echo ' margin-bottom: 15px;';
echo '}';
echo '.author-box ul.social-media-links {';
echo ' list-style: none;';
echo ' padding: 0;';
echo '}';
echo '.author-box ul.social-media-links li {';
echo ' display: inline-block;';
echo ' margin-right: 10px;';
echo '}';
echo '</style>';
}
add_action('wp_head', 'wpsnippets_divi_author_box_styles');
This code adds custom CSS styles to the author box. It uses the echo function to output the CSS styles within a <style> tag. The CSS styles target the different elements within the author box, such as headings, paragraphs, and social media links.
Example 3: Adding custom fields to the author profile
This example demonstrates how to add custom fields to the author profile in WordPress, which can be used to display additional information in the author box.
function wpsnippets_divi_author_profile_fields($user_contactmethods) {
$user_contactmethods['job_title'] = 'Job Title';
$user_contactmethods['location'] = 'Location';
return $user_contactmethods;
}
add_filter('user_contactmethods', 'wpsnippets_divi_author_profile_fields');
This code adds two custom fields, “Job Title” and “Location”, to the author profile in WordPress. It uses the user_contactmethods filter to modify the array of contact methods. The custom fields will be displayed in the user profile editor and can be filled in by the author.