Initially when I setup the author page, I used the Cimy User Extra Fields plugin to get those extra fields; however in the words of Lord Downey, “It, uh … lacked elegance.” Don’t get me wrong, Marco Cimmino has created a very powerful and useful plugin. My problem is that it’s too complicated for what I want to do. Then almost as though the WordPress developers read my mind, the release of WordPress 2.9 included a new filter making it simple to add/remove new fields to the user profile page.  So easy in fact that the following bit of PHP code added to my theme’s function.php file was all that was required to add the fields I needed.

function vl2_contactmethods( $contactmethods ) {
 // Add Twitter
 $contactmethods['twitter'] = 'Twitter';
 //add Facebook
 $contactmethods['facebook'] = 'Facebook';
 //add flickr
 $contactmethods['flickr'] = 'Flickr';
 //add linkedin
 $contactmethods['linkedin'] = 'LinkedIn';
 //add delicious
 $contactmethods['delicious'] = 'Delicious';
 //add phone
 $contactmethods['phone'] = 'Phone';
 //add phone-type
 $contactmethods['phonetype'] = 'Phone Type';
 //add locality
 $contactmethods['locality'] = 'Locality';
 //add region
 $contactmethods['region'] = 'Region';
 //add postalcode
 $contactmethods['postalcode'] = 'Postal Code';
 //add country
 $contactmethods['country'] = 'Country';

 return $contactmethods;
 }
 add_filter('user_contactmethods','vl2_contactmethods',10,1);

Of course just storing the info with the user’s profile isn’t enough; we also need to be able to pull it back out. This can be done using either the_author_meta or get_the_author_meta. I ended up using get_the_author_meta for two reasons:

1. I’m pulling the author’s meta info outside of the Loop.
2. I wanted to return, not echo the values, so I can manipulate them before displaying them.

But that still wasn’t complicated enough, after all I started this project wanting to generate an hCard, using some jQuery UI to give it a fancy accordion effect. First we load the javascript for that accordion effect, by adding the following to our author.php file.

<script type="text/javascript">
 $(function() {
 $("#accordion").accordion();
 });
 </script>

Next we get all the user fields by:

<?php if(isset($_GET['author_name'])) :
 // NOTE: 2.0 bug requires: get_userdatabylogin(get_the_author_login());
 $curauth = get_userdatabylogin($author_name);
 $id = $curauth->ID;
 else :
 $curauth = get_userdata(intval($author));
 $id = $curauth->ID;
 endif;

 $twitter = get_the_author_meta('twitter', $id);
 $flickr = get_the_author_meta('flickr', $id);
 $linkedin = get_the_author_meta('linkedin', $id);
 $delicious = get_the_author_meta('delicious', $id);
 $lastfm = get_the_author_meta('lastfm', $id);
 $phone = get_the_author_meta('phone', $id);
 $ptype = get_the_author_meta('phone-type', $id);
 $addr = get_the_author_meta('addr', $id);
 $locality = get_the_author_meta('locality', $id);
 $region = get_the_author_meta('region', $id);
 $postalcode = get_the_author_meta('postalcode', $id);
 $country = get_the_author_meta('country', $id);
 ?>

Now that we’ve got the data and the JavaScript; we need to combine it

<div id="authorbox">
 <?php if (function_exists('get_avatar')) { echo get_avatar((get_the_author_meta('user_email', $id)), '120'); }?>
 <div id="accordion">
 <h3><a href="#">About</a> <span><span><?php echo $curauth->first_name; ?></span> <span><?php echo $curauth->last_name; ?></span></span></h3>
 <div id="about">
 <p><?php echo $curauth->description; ?></p>
 </div> <!-- #about -->
 <h3><a href="#">Contact</a></h3>
 <div id="contact">
 <p><span><span><?php echo $ptype; ?></span><a href="callto:<?php echo $phone; ?>"><?php echo $phone; ?></a></span></p>
 <p"><a href="<?php echo get_the_author_meta('user_url', $id); ?>" rel="me"><?php echo get_the_author_meta('user_url', $id); ?></a></p>
 <p><span><?php echo $addr; ?></span><br/>
 <span><?php echo $locality; ?></span>, <span><?php echo $region; ?></span> <span><?php echo $postalcode; ?></span><br/><span><?php echo $country; ?></span></p>
 </div> <!-- #contact -->
 <h3><a href="#">Networks</a></h3>
 <div id="social-networks">
 <ul>
 <li><a title="View <?php echo $curauth->first_name; ?> <?php echo $curauth->last_name; ?>'s Profile" href="http://www.linkedin.com/in/<?php echo $linkedin ?>"><img src="<?php bloginfo('template_directory'); ?>/images/linkedin.png" alt="LinkedIn" width="48" height="48" /></a></li>
 <li><a title="Follow <?php echo $twitter ?> on Twitter" href="http://twitter.com/<?php echo $twitter ?>"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" width="48" height="48" alt="Twitter" /></a></li>
 <li><a title="See <?php echo $flickr ?>'s photostream" href="http://www.flickr.com/photos/<?php echo $flickr ?>"><img src="<?php bloginfo('template_directory'); ?>/images/flickr.png" alt="Flickr" width="48" height="48" /></a></li>
 <li><a title="<?php echo $delicious ?>'s Bookmarks" href="http://delicious.com/<?php echo $delicious ?>"><img src="<?php bloginfo('template_directory'); ?>/images/delicious.png" alt="Delicious" width="48" height="48" /></a></li>
 </ul>
 </div> <!-- #social-networks -->
 <h3><a href="#"><?php echo $curauth->first_name; ?>'s Last 5 Posts</a></h3>
 <?php $my_query = new WP_Query('showposts=5&author='.$id); ?>
 <div id="5posts">
 <ul>
 <?php if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>
 <li><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a> <?php the_time('j F Y'); ?></li>
 <?php endwhile; ?>
 </ul>
 </div> <!-- #5posts -->
 </div><!-- #accordion -->
 </div><!-- #authorbox -->
 <?php else : ?>
 <h2>Not Found</h2>
 <p>Sorry, but you are looking for something that isn't here.</p>
 <?php endif; ?>

Oops, I almost forgot to mention; we need to make sure we’re loading jQuery & jQuery UI on the author page. Since I separate out the header stuff into it’s own file (header.php); I added this bit of code before the closing </head> tag in that file:

<?php //if (is_author()) wp_enqueue_script('jquery-ui-core');
if (is_author()) {
 wp_deregister_script('jquery');
 wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
 wp_deregister_script('jquery-ui-core');
 wp_register_script('jquery-ui-core', ("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"), array('jquery'), '');
 wp_enqueue_script('jquery');
 wp_enqueue_script('jquery-ui-core');
} ?>

And that’s that. Now my author page will by default display my gravatar next to the Biographical Info entered in my profile. There will also be three other section available…

* Contact: Gives selected contact information for me.
* Networks: Displays icons for some social networks I use with links to my profiles on those networks.
* Last 5 Posts: Shows my latest posts.

Later when I have more time, I’ll update the zipped copy of the VectorLover2 theme on this site for people who want to download a complete copy of the code I used for the author pages.

Update: I forgot to thank Joost de Valk for his excellent article, User Contact Fields in WordPress 2.9.
Update 2: I changed the code to register jquery-ui-core, so that it recognizes jquery as a dependency. This tutorial had been working fine; but for whatever reason, it suddenly was trying to load jQuery after jQuery-UI (which doesn’t work so good).

Author Pages with hCard & jQuery © Mark McKibben, Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.

	if ( $options['menuLayout'] == NR_MENU_SINGLE ) {

		add_menu_page('Now Reading', 'Now Reading', 9, 'admin.php?page=add_book', 'now_reading_add');

		add_submenu_page('admin.php?page=add_book', 'Add a Book', 'Add a Book',$nr_level , 'add_book', 'now_reading_add');

		add_submenu_page('admin.php?page=add_book', 'Manage Books', 'Manage Books', $nr_level, 'manage_books', 'nr_manage');

		add_submenu_page('admin.php?page=add_book', 'Options', 'Options', 9, 'nr_options', 'nr_options');

To read like this:

	if ( $options['menuLayout'] == NR_MENU_SINGLE ) {

		add_menu_page('Now Reading', 'Now Reading', 9, 'add_book', 'now_reading_add');

		add_submenu_page('add_book', 'Add a Book', 'Add a Book',$nr_level , 'add_book', 'now_reading_add');
		add_submenu_page('add_book', 'Manage Books', 'Manage Books', $nr_level, 'manage_books', 'nr_manage');
		add_submenu_page('add_book', 'Options', 'Options', 9, 'nr_options', 'nr_options');

Then Now-Reading’s single admin menu worked properly again.

Fixing Now-Reading’s Admin Menu © Mark McKibben, Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.

Features

• Threaded comments with quick reply links.
• Integrated plugin support for: Now-Reading, FAlbum, Tweetbacks, wpLicense
• Custom login page
• Added a new default Gravatar image to list of options under Settings -> Discussion in WordPress’s admin backend.
• hCard microformatting to both post & comment authors.
• A stylesheet to remove unnecessary elements from printed pages.
• Changed page titles to display as “PostTitle « BlogName” vs the previous “BlogName » PostTitle” for better SEO
• Wrapped posts in a DIV with post_class() to add support for fancier styling on posts.

Special Thanks

This release would not have been possible without Erwin Aligam — who designed the initial theme, ThemeLab — who ported the design to WordPress, famfamfam — designed some wicked-nice icons or any of these sites: WPEngineer.com, TheEnglishGuy.co.uk, OttoDestruct.com and Sivel.net — all of whom provided valuable information while I was working on this release.

Download

You can download this release from my VectorLover 2 page.

VectorLover 2 — Initial Release © Mark McKibben, Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.

I’ve disabled the most likely culprit and now am writing this post to see if I’m right about which plugin is causing the problem.  Wish me luck.

Side note: Our snowblower stopped working during the last snow-storm.  The engine runs, but the auger stopped turning.  This weekend we got a bunch more snow, so I opened up the snowblower, figured out what the problem was and fixed it.  I fought the snowblower and I won!  :)  Unfortunately while troubleshooting it, I also fought my vice-grips and the vice-grips won (I’ve got the blood blister and cuts to prove it).

UPDATE: My first guess was wrong but I’ve figured out which plugin is causing the problem and deactivated it. For the record, Referrer Detector & LiveJournal Crossposter do not play nice together.

Testing… 1… © Mark McKibben, Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.

UPDATE: I’ve removed the sticky setting from this post, as I’ve completed all the work I intend to do for now on this theme. Lastly, I’ve setup a page where any new information on VectorLover2 will be released and I will be posting a zip file of VL2 there for people interested in my version of the theme.

CHANGELOG

• Integrated the Now-Reading plugin.
• Integrated the FAlbum plugin.
• Added Edit links to all posts/pages, available to the admin only.
  • Formated the Edit links (including comment edit links) to be in red text and display the pencil icon from famfamfam’s Silk Icons.
• Changed RSS & Admin login links in header to use icons (again from famfamfam’s Silk Icons).
• Added hCard microformatting to both post & comment authors.
• Added a stylesheet for printing which removes the sidebar and the comment form.
• Wrapped posts in additional DIV using post_class() to add support for fancy styling on sticky posts.
  • Technically, I can do a lot more then just styling the sticky posts, but that was the motivation to do it.
  • Redid my implementation of this to allow for backwards compatibilty. Ran across that tip while search for more info on styling sticky posts.
• Altered the body tag on the index.php page of vectorlover2¹ to conditionally have an id added to allow for specific styling on just the home page.
• Changed footer credit to link to the home page of the site.
• Changed page titles to display as “PostTitle « BlogName” vs the previous “BlogName » PostTitle” which I prefer the look of.
  • Especially when I see my posts show up in Google’s search results.
• Integrated Tweetbacks plugin.
  • Only integrated with pre-WordPress 2.7 comments
• Implemented WordPress 2.7’s Enhanced Comment Display features.
• Fixed Logout link in comments.php to work with WordPress 2.7
• Added custom “default” gravatar image.
• Changed “Read More” links to only show on front page when I use split an entry and hide some of it behind a link.
• Integrate Tweetbacks plugin with WordPress 2.7 enhanced comment display features.
  • Separating Pings from Comments in WordPress 2.7 has been very helpful with this.
• Build-in custom login page
• Developed special styling for sticky posts now that they should be appearing at the top of my home page.
  • It’s not exactly how I want it, but it’s good enough for now.  I’d rather the sticky posts get written to the home page with a different structure (vs hiding bits with CSS) but while I did find this article with some info on doing just that, my PHP-fu isn’t strong enough to get it to work right now.
• Added a second “sidebar” in down at the bottom of the page to display more widgety goodness
  • The styling of the Footer sidebar isn’t perfect, but it’s good enough.
• Altered RSS links & comment form as suggested by Branding Rant to setup & track goals.
  • Decided to scrap this idea for now, especially as after rereading Branding Rant’s article and noticing it wants Google’s javascript at the top of the page rather than the bottom  (which can negatively affect page loading times). Changed my mind on this after reading Rob’s comment.

TODO

• Figure out where the original author got the icons for VectorLover from (they look like an icon pack I’ve seen but can’t remember where).
  • Appears to be the Vector icon set from monofactor, unfortunately:
    • I no longer remember exactly why I wanted to know this.
    • The icon set was released as a single Adobe Illustrator file, which neither Gimp or Inkscape can open correctly (some of the gradients are screwed up).

¹ The utterly original name I’ve given to my revision of VectorLover.

Updating VectorLover Theme © Mark McKibben, Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.

New Look © Mark McKibben, Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.

// Now-Reading Plugin: Get the display name of the book's reader
function mlm_book_reader( $echo=true ) {
	global $book;

	$user_info = get_userdata($book->reader);

	if ( $echo )
		echo $user_info->display_name;
	return $user_info->display_name;

}

This grabs “Display name publicly as” from the user’s profile and displays it on the page. I put the function in the functions.php file of the theme I’m using (so any automatic upgrades of the plugin won’t erase it). Then I put < ?php mlm_book_reader() ?> into my custom single.php template and viola!

Note: this has only been tested on WordPress 2.6.2 with Now-Reading 4.4.3.

Now-Reading Tweaks v2 © Mark McKibben, Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.

• I borrowed this book fromlibrary

When they should simply have a line reading “I borrowed this book from my local library”. I had spent much
time fiddling with my templates trying to figure out how the upgrade broke them and today I figured it out. The truth is my template was just fine. The problem is the newer version of Now-Reading was applying a new filter to book-meta¹. That filter is wpautop and it was wrapping my variable in <p> … </p> tags. Those tags screwed up the display and made my variable checks fail. To correct the problem, I went into now-reading/default-filters.php and commented out add_filter('book_meta_val', 'wpautop');. Now my single book pages look like they’re supposed to again. Yeah!

¹ This is a custom field available in the back-end of the plugin and it is where I store the information telling my template if I borrowed the book and from whom I borrowed it.

Now-Reading: Default Filters on Book-Meta © Mark McKibben, Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.

There are probably other characters I need to fix yet, so if you happen to see something like hieroglyphics on this site or other gibberish, let me know what entries you found it on so I can fix them.  And my thanks to Lynsey for prompting me to fix these entries.

Fixing Entries © Mark McKibben, Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.

I looked at the code Rob used and with a little help from the Practical PHP I hacked together my own function based on Rob’s. By default print_reader2 works the exactly the same as print_reader¹ but by feeding it an additional parameter, you get your choice of what to use to display as reader’s name:

• 0: Prints out the user_login aka the username you use to log into WordPress.
• 1: Prints user_nicename, appears to simply be an all lower case version of the user’s nickname².
• 2: Prints display_name, from the “Display name publicly as” field in your WordPress profile.
• 3: Prints first_name, from the “First name” field in your WordPress profile.
• 4: Prints nickname, from the “Nickname” field in your WordPress profile.

function print_reader2( $echo=true, $reader_id = 0, $display = 0 ) {
	global $userdata;

	$username='';

	switch($display) {
		case "1": if (!$reader_id) { get_currentuserinfo(); $username = $userdata->user_nicename; } else { $user_info = get_userdata($reader_id); $username = $user_info->user_nicename; }; break;
		case "2": if (!$reader_id) { get_currentuserinfo(); $username = $userdata->display_name; } else { $user_info = get_userdata($reader_id); $username = $user_info->display_name; }; break;
		case "3": if (!$reader_id) { get_currentuserinfo(); $username = $userdata->first_name; } else { $user_info = get_userdata($reader_id); $username = $user_info->first_name; }; break;
		case "4": if (!$reader_id) { get_currentuserinfo(); $username = $userdata->nickname; } else { $user_info = get_userdata($reader_id); $username = $user_info->nickname; }; break;
		default: if (!$reader_id) { get_currentuserinfo(); $username = $userdata->user_login; } else { $user_info = get_userdata($reader_id); $username = $user_info->user_login;};
   }
	if ($echo)
		echo $username;
	return $username;
}

Side note: WordPress 2.5.1 got released today and it includes a security fix, be sure to update your blogs!

¹ At least, I think it does. I’m not a programmer and I only know enough PHP to be dangerous to myself.
² The WordPress Codex does not appear to define what this field is used for or why it exists, so that’s just my guess.

Now-Reading Tweaks © Mark McKibben, Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.