BlogBuilder WordPress Theme

If you have purchased the Builder WordPress theme from ThemeForest and set up a blog with multiple authors, you’ve likely realized that author avatars are controlled in the theme options. This isn’t ideal for blogs that need their editors and writers to be in control of their avatar settings, so this tutorial will show you how to use Gravatar¬†instead.

Note: I believe the Builder theme actually only supports one author avatar for the entire theme, but I didn’t create a second user account to test this out. I’m giving the designer the benefit of the doubt and assuming any user with access to the theme options can upload their own avatar.¬†

Regardless, editing avatars via theme options isn’t ideal, so here are the steps you need to take in order to replace Builder’s native avatar support with Gravatar, the global avatar commonly used in other WordPress themes. Following these steps will give you the ability to easily display different avatars for every author on your site.

1. Install the Builder child theme

Before editing any code, you’ll want to install the Builder child theme, which the theme author was generous enough to include in the theme package. It’s titled “builder_child.zip” and is located in the same folder as the primary “builder.zip” theme. If you already have the primary theme installed, simply head back to ThemeForest, download the package again, unzip it, and install builder_child.zip.

2. Copy single.php from the Builder parent theme and create single.php in the child theme

The Single Post template file, single.php, is what we’ll need to modify in order to enable Gravatar support. Before we do this, however, we need to create the file within the child theme. If you have activated the child theme, go to your WordPress theme editor under “Appearance” and select “Builder” next to “Select theme to edit.” Click “Select” to bring up the files for the Builder parent theme. Find single.php and copy all of the code within the file.

Next, you’ll need to create single.php within the Builder child theme folder and copy in the code. So you’re simply creating a copy of single.php within the child theme folder. You can accomplish this easily in cPanel or upload the file via FTP.

3. Replace the theme avatar with Gravatar

Now we need to replace Builder’s avatar code within single.php with the code that will render Gravatars. Make sure you’re editing single.php within the Builder child theme and look for the following:

</pre> <pre><img src="<?php echo stripslashes($data['blog_post_show_author_avatar']) ?>" style="float:left; margin-right:20px; width:80px; height:80px" alt="<?php bloginfo('name'); ?>" /></pre> <pre>

Select all of it, delete it, and replace it with the following:

<?php echo "<div class='about-author-avatar'>" . get_avatar( get_the_author_meta('ID'), 90 ) . "</div>"; ?>

Now the author images following blog posts will be populated using Gravatar, not the avatar uploaded in Builder’s theme options. There’s one final step necessary to make the images line up correctly.

4. Style Gravatar div in child theme’s style.css

If you stopped at step 3, you’ll notice that the author avatars are aligned above the author description text. To have the avatar show up to the left of the description like it did previously, add the following code to the Builder child theme’s style.css file. (This file is included in the Builder child theme install package, so you don’t need to create it.)

.about-author-avatar img {float:left;margin-right:20px;width:80px;height:80px;}

As you may notice, that’s simply the in-line CSS that was deleted in step 3.

There you have it. The Builder theme is now Gravatar ready.

Leave a Reply

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

Post comment