Create an “About the author” area for Thematic

author_page

By default, Thematic comes with a simple and useful representation for the Author Archives template. While this might be enough for the majority of users, there are times when we need more detailed information about the author.

This is particularly useful on multi-author blogs, where readers might want to read more posts from a particular writer!

The scope of this tutorial is composed of two parts:

  1. Listing the author’s name, biographical info, gravatar picture and website inside the post body. ( Demo )
  2. Creating an author archive page with the same info as above, plus we’ll list the author’s posts in a different way (Thematic already has this functionality implemented, but we’ll do some changes to the styling and the way the posts are displayed). (Demo)

Part 1: “About the author” area

To do this we’ll have to filter the default thematic_postheader().

The code is basically the default postfooter code with some modification, mainly to the //Display author info area. Note the fact that we’re only displaying the author name, description, image and url inside the single post. On the homepage we’re still displaying the default thematic post header.

So copy this inside your functions.php file (check out for the opening and closing php tags) and reload the page. You should see on the post page the author area.

 

Next we need to style it. Add this css to the style.cssof your child theme.

#content, #main{
	overflow:visible;
}
/* Author Area Styling */
#author-info{
	padding:18px;
	background:#ffffcc;
	border:1px dashed #e8e89b;
	border-left:20px solid #e8e89b;
	padding:10px 40px 10px 20px;
	margin:18px 0px 18px -40px;
	font-size:13px;
}
.author #author-info{
	margin-top:0;
	margin-bottom:0;
}
#author-info .entry-title{
	font-size:14px;
	text-transform:uppercase;
	font-weight:normal;
	color:#111;
}
#author-info .meta-prep-author{
	text-transform:lowercase;
}
#author-info .author-bio p{
	margin-bottom:5px;
	line-height:19px;
}
#author-info .avatar{
	width:70px;
	height:70px;
	border:4px solid #fff;
	box-shadow: 1px 1px 1px #cbcbcb;
	-moz-box-shadow:1px 1px 1px #cbcbcb;
	-webkit-box-shadow:1px 1px 1px #cbcbcb;
}

Part 2: Author archives

By default Thematic doesn’t come with the author bio activated. If we go to Appearance->Thematic Options in the WordPress backend, we can activate it there by clicking the unchecked check box :).

info_on_author_page

However we want some elements from that page changed. More exactly we don’t want the email address to be shown publicly (although Thematic passes it through antispambot “fool” e-mail harvesters) and we also want to display the author’s website link similar to what we have on the single post page.

As a bonus we will display the author’s posts in a different way so it’s a lot easier to find what we’re interested in. The idea is that instead of listing all the posts in chronological order we’ll order them by category. You can see what I mean in the Author Archives Page.

This time we won’t make the changes to the functions.php file as we would normally do with any thematic child theme. Instead we’ll have to create a new author.php file and place it inside our child theme so we can overwrite the default Thematic functionality.

The reason we’re making the changes to the template file instead of inside functions.php is that there is no filter on the Author Info Area and instead the code is directly inside the template file. As a side note I think the author template and the search template are the only ones that still have actual code inside them. For anything else you can pretty much hook or filter your way inside functions.php.

So now to the authors.php code.

<!-- #container -->

<!--?php thematic_sidebar() ?-->
<!--?php get_footer() ?-->

Conclusions

So we added an author area on our single post page, enabled and modified the author area on the author archives page and as a bonus modified the default loop to list all the posts of the author organized under categories.

If you don’t like to do a lot of copy paste you can just download the Author Child Theme. Enjoy!

In order to install it you have to download the Thematic Theme (from which this child theme inherits all of the functionality), upload both themes (Author Template Child Theme and Thematic) to your server in the themes folder AND THEN ACTIVATE the Author Template Child Theme.

About Cristian Antohe

Cristian Antohe is the co-founder Cozmoslabs. He's a WordPress developer, web designer and Open Source fanatic. He's part of the team that developed Profile Builder and WordPress Creation Kit and also helps curate wpMail.me.

Find me on: Google + | Twitter

6 thoughts on “Create an “About the author” area for Thematic

  1. Pingback: Create an About the Author Area in Thematic

Leave a Reply

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


9 + one =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>