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. ( Single Post 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). (Author Archives 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<?php
function postheader_and_author_info(){
 
    global $id, $post, $authordata;
 
    // Create $posteditlink    
    $posteditlink .= '<a href="' . get_bloginfo('wpurl') . '/wp-admin/post.php?action=edit&amp;post=' . $id;
    $posteditlink .= '" title="' . __('Edit post', 'thematic') .'">';
    $posteditlink .= __('Edit', 'thematic') . '</a>';
 
 
    if (is_single() || is_page()) {
        $posttitle = '<h1 class="entry-title">' . get_the_title() . "</h1>n";
    } elseif (is_404()) {    
        $posttitle = '<h1 class="entry-title">' . __('Not Found', 'thematic') . "</h1>n";
    } else {
        $posttitle = '<h2 class="entry-title"><a href="';
        $posttitle .= get_permalink();
        $posttitle .= '" title="';
        $posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
        $posttitle .= '" rel="bookmark">';
        $posttitle .= get_the_title();   
        $posttitle .= "</a></h2>n";
    }
 
    $postmeta = '<div class="entry-meta">';
    $postmeta .= '<span class="meta-prep meta-prep-author">' . __('By ', 'thematic') . '</span>';
    $postmeta .= '<span class="author vcard">'. '<a class="url fn n" href="';
    $postmeta .= get_author_link(false, $authordata->ID, $authordata->user_nicename);
    $postmeta .= '" title="' . __('View all posts by ', 'thematic') . get_the_author() . '">';
    $postmeta .= get_the_author();
    $postmeta .= '</a></span><span class="meta-sep meta-sep-entry-date"> | </span>';
    $postmeta .= '<span class="meta-prep meta-prep-entry-date">' . __('Published: ', 'thematic') . '</span>';
    $postmeta .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta .= get_the_time(thematic_time_title()) . '">';
    $postmeta .= get_the_time(thematic_time_display());
    $postmeta .= '</abbr></span>';
    // Display edit link
    if (current_user_can('edit_posts')) {
        $postmeta .= ' <span class="meta-sep meta-sep-edit">|</span> ' . '<span class="edit">' . $posteditlink . '</span>';
    }               
    $postmeta .= "</div><!-- .entry-meta -->n";
 
 
    $postmeta_issingle = '<div class="entry-meta">';
    $postmeta_issingle .= '<span class="meta-prep meta-prep-entry-date">' . __('Published: ', 'thematic') . '</span>';
    $postmeta_issingle .= '<span class="entry-date"><abbr class="published" title="';
    $postmeta_issingle .= get_the_time(thematic_time_title()) . '">';
    $postmeta_issingle .= get_the_time(thematic_time_display());
    $postmeta_issingle .= '</abbr></span>';
    // Display edit link
    if (current_user_can('edit_posts')) {
        $postmeta_issingle .= ' <span class="meta-sep meta-sep-edit">|</span> ' . '<span class="edit">' . $posteditlink . '</span>';
    }               
    $postmeta_issingle .= "</div><!-- .entry-meta -->n";
 
 
	//Display author info area
	$postauthor .='<div id="author-info" class="vcard">';
	$postauthor .= '<h2 class="entry-title"><span class="meta-prep meta-prep-author">' . __('By ', 'thematic') . '</span>';	
	$postauthor .= '<span class="author vcard">'. '<a class="url fn n" href="';
    $postauthor .= get_author_link(false, $authordata->ID, $authordata->user_nicename);
    $postauthor .= '" title="' . __('View all posts by ', 'thematic') . get_the_author() . '">';
    $postauthor .= get_the_author();
    $postauthor .= '</a></span></h2>';
	$email = get_the_author_email();
	$postauthor .= str_replace( "class='avatar", "class='photo avatar", get_avatar("$email"));
	$postauthor .= '<div class="author-bio note"><p>' . get_the_author_description() . '</p></div>';
	$postauthor .= '<div class="author-url"><a href="' . get_the_author_url() . '">Website</a></div>';
	$postauthor .= '</div>';
 
 
 
    if ($post->post_type == 'page' || is_404()) {
        $postheader = $posttitle;        
    } else {
        $postheader = $posttitle . $postmeta;    
    }
	if (is_single()){
		$postheader = $posttitle . $postmeta_issingle . $postauthor;   
	}
 
    echo $postheader;
}
add_filter('thematic_postheader', 'postheader_and_author_info');
?>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

#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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<?php
global $options;
foreach ($options as $value) {
    if (get_option( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; }
    else { $$value['id'] = get_option( $value['id'] ); }
    }
?>
<?php get_header() ?>
 
	<div id="container">
		<div id="content">
 
<?php the_post() ?>
 
            <?php //thematic_page_title() 
            	  //We've commented out the Thematic Page title since that info will be displayed in our Author area
            ?>		
 
<?php /* if display author bio is selected */ if($thm_authorinfo == 'true' & !is_paged()) { ?>
			<div id="author-info" class="vcard">
			    <h2 class="entry-title"><?php _e('Author Archives: ', 'thematic') ?><strong><?php echo $authordata->first_name; ?> <?php echo $authordata->last_name; ?></strong></h2> 
    			<?php thematic_author_info_avatar(); ?>
    			<div class="author-bio note">
                    <?php if ( !(''== $authordata->user_description) ) : echo apply_filters('archive_meta', $authordata->user_description); endif; ?>
                </div>  			
    			<div class="author-url"><a href="<?php the_author_url() ?>">Website</a></div>
			</div><!-- #author-info -->
<?php } ?>
<div class="entry-content">	
<?php //thematic_author_loop() - we won't use the default thematic author loop
	  //instead will list the post sorted by category		
			$categories = get_categories();
 
			foreach($categories as $category){
				$cat_id = $category->cat_ID;
				$cat_slug = $category->category_nicename;
				$cat_name = $category->cat_name;
 
 
				//The Query
				query_posts(array(
					'category__in'=>	$cat_id,
					'author' =>			$authordata->ID,
					'posts_per_page'=>	100
					));
 
				if(have_posts()){
					echo '<h2>' . $cat_name . '</h2>';
				}
 
				echo '<ul>';
				//The Loop
				while ( have_posts() ) : the_post() ;?>
 
				<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
 
				<?php endwhile;
				echo '</ul>';
 
				//Reset Query
				wp_reset_query();
			}
 ?>
</div>	
 
		</div><!-- #content -->
	</div><!-- #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.

previewDownload Author Child Theme Version 1.0

Further Reading:

  1. How To Create a WordPress Theme – a tutorial series by Ian Stewart
  2. Thematic PHP constants
  3. WP Greet Box, my Design and Thematic – The Good, the Bad and the Ugly
  4. Add a search box to the thematic menu
  5. Add “Featured Posts” to your Thematic child theme
By | Published: October 28, 2009 | This entry was posted in Thematic and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

5 Comments

  1. Eugen Rochko
    Posted November 3, 2009 at 10:00 pm | Permalink

    I must thank you for this, because it really did something better of my author pages… So, in short, thank you. ^^

    Reply
  2. Wayne
    Posted December 15, 2009 at 7:37 am | Permalink

    That’s nice topic. But I had a hard time viewing your site in IE. What could be wrong?

    Reply
  3. Andrew Benton
    Posted January 22, 2010 at 11:46 pm | Permalink

    I am trying to implement this, but its posting the author info at the top of a single page, how can I get it to push down to the bottom of the article?

    Reply

One Trackback

  1. By Create an About the Author Area in Thematic on November 25, 2009 at 9:29 pm

    [...] how to create an “about the author” area in Thematic with this tutorial by Cristi at Cozmos Labs. You’ll learn how [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

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>

Subscribe without commenting