Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 49: How to create an Author Box for Thesis 2

WordPress Author Bio

In this step I’ll show you how to create your own Thesis 2 Author box.  Why buy when you can build?  Thesis provides an author avatar box that uses Gravatar images along with an author description box that displays the author’s WordPress description (as shown above).  If you haven’t already filled in your Biographical info in your User Profile, then do so before continuing with this step.

Navigate to the Thesis 2 Single HTML Template page.

Thesis 2 Single HTML Template

We need to create a “Container” box that we will use to hold our author information.

Thesis 2 Add Boxes Container

Give your container box a name.

Thesis 2 Custom Author Box

Now click the blue “Add Box” button.

Thesis 2 Autor Box Container

Shift-click and drag your new author box to the Home Post Box.

Thesis 2 Home Post Box

Scroll down and click the “Show Tray” in the gray bar.

Thesis 2 Show Tray

The tray will expand to expose some additional green bars.  Look for the “Author Avatar” and “Author Description” green bars. Click once on each bar.

Thesis 2 About Author

These two boxes will now appear above the gray bar and are now part of the template.

Thesis 2 Author Description green bar

However, these author boxes are not where we want them.  Shift-click and drag-and-drop onto your new custom author box.

Thesis 2 Custom Author Box with Green Bars

Click the gear icon on your Custom Author Box.  Give your HTML class a name.

Custom Author HTML Class

Click the green “Save Template” button.

Thesis 2 Save Template

Navigate to the Thesis 2 CSS page.

Thesis 2 CSS Page

On the right side of the screen click the Packages drop-down and select “Single Element Styles”.  Click the blue “Add Package” button.

Thesis 2 Add Package

Give your custom author CSS package a name, reference, and CSS selector.  The reference will be the same as the HTML box we created above.

Thesis Custom Author CSS Package

Next click on the “Options” tab.

Scroll down to the Background settings and change the Background Color as desired.

Thesis 2 Author Background Color

Scroll further down and set the Border options.

Thesis 2 Author Border

Next we’ll adjust the Padding.

Thesis 2 Author Padding

Now click on “Additional CSS”.  We’ll add some CSS to move the Gravatar image to the right side of the box and adjust the padding.  Click the green “Save” button when you’re finished.

Thesis 2 Author Additional CSS

We now need to add the custom author CSS to our site.  Take note of the “&custom_author” name.

Thesis 2 Custom Author CSS Package

On the left side of the CSS screen, click in the box and enter a new line.  Add the “&custom_author” CSS package you just created.

Thesis 2 Skin CSS

Then click the green “Save CSS” button.

Thesis Save CSS Button

Our custom author box now looks like this.

Thesis 2 Custom Author Box

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 5 comments… add one }
  • Daniel July 22, 2013, 12:45 PM

    Top – Thats fantastic and really easy to do. So i dont have to buy this box!

  • Doug Macklem July 22, 2013, 4:49 PM

    No need to buy a box if the built-in Custom Author Box suits your needs. I am currently running the built-in author box and not using any 3rd party boxes for this.

  • Jim Hunter August 15, 2013, 4:37 PM

    Navigate to single template HTML. Got that. “We need to create a container. ” Not on the template page. Where do I locate that?

  • Doug Macklem August 15, 2013, 8:17 PM

    Try Thesis => Skin => Editor, select the template you want to work on then look at the “Select box to add” drop-down at the top right of the page. Scroll to the bottom of the list and look for * HTML Container. The asterisk (*) indicates you are adding a new item. This is a change Thesis 2.1 made.

  • Carl Wagner December 23, 2013, 6:01 PM

    Thank You so much – we are re-designing our site to WP: Thesis2 design. I simply googled how to insert avatar image to thesis 2 – and your post popped up. The new blog in creation is – when complete we will switch back to our current URL. Again – thanks so much!!

Leave a Comment