CoffeeBear.net

Author Pages with hCard & jQuery

Posted by Mark | Filed under Web Design, WordPress

While I’m def­i­nitely not the designer that any of the peo­ple who cre­ated these beau­ti­ful hCards, I was greatly impressed by them. In par­tic­u­lar, I liked the per­sonal hCard cre­ated by Tim Van Damme and decided to make my own ver­sion of it. Only since I’m using Word­Press rather; than a sta­tic site, I wanted the page to be gen­er­ated auto­mat­i­cally from info stored with my user pro­file within Word­Press. Unfor­tu­nately Word­Press does not by default store all the infor­ma­tion I wanted to dis­play as part of the user profile.

Ini­tially when I setup the author page, I used the Cimy User Extra Fields plu­gin to get those extra fields; how­ever in the words of Lord Downey, “It, uh … lacked ele­gance.” Don’t get me wrong, Marco Cim­mino has cre­ated a very pow­er­ful and use­ful plu­gin. My prob­lem is that it’s too com­pli­cated for what I want to do. Then almost as though the Word­Press devel­op­ers read my mind, the release of Word­Press 2.9 included a new fil­ter mak­ing it sim­ple to add/remove new fields to the user pro­file page.  So easy in fact that the fol­low­ing 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 stor­ing the info with the user’s pro­file 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 out­side of the Loop.
2. I wanted to return, not echo the val­ues, so I can manip­u­late them before dis­play­ing them.

But that still wasn’t com­pli­cated enough, after all I started this project want­ing to gen­er­ate an hCard, using some jQuery UI to give it a fancy accor­dion effect. First we load the javascript for that accor­dion effect, by adding the fol­low­ing 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 com­bine 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 for­got to men­tion; we need to make sure we’re load­ing jQuery & jQuery UI on the author page. Since I sep­a­rate out the header stuff into it’s own file (header.php); I added this bit of code before the clos­ing </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 dis­play my gra­vatar next to the Bio­graph­i­cal Info entered in my pro­file. There will also be three other sec­tion available…

* Con­tact: Gives selected con­tact infor­ma­tion for me.
* Net­works: Dis­plays icons for some social net­works I use with links to my pro­files on those net­works.
* Last 5 Posts: Shows my lat­est posts.

Later when I have more time, I’ll update the zipped copy of the VectorLover2 theme on this site for peo­ple who want to down­load a com­plete copy of the code I used for the author pages.

Update: I for­got to thank Joost de Valk for his excel­lent arti­cle, User Con­tact Fields in Word­Press 2.9.
Update 2: I changed the code to reg­is­ter jquery-ui-core, so that it rec­og­nizes jquery as a depen­dency. This tuto­r­ial had been work­ing fine; but for what­ever rea­son, it sud­denly was try­ing to load jQuery after jQuery-UI (which doesn’t work so good).
Update 3: Hmm, now that I look back at this old post I real­ize a cou­ple of things: 1) sev­eral of the links I’d intended to be here are miss­ing (since cor­rected) and 2) this post was writ­ten worse than I thought it was.

Similar Posts

• Convert from AMM to Now Reading
  As part of my upgrading to the latest/greatest version of WordPress, I switched over to using the No ...
• Now-Reading Tweaks
  I use Rob Miller's excellent Now-Reading plugin to track all the books I've read and am reading here ...
• Now-Reading Tweaks v2
  Some time back, I tried to make Rob Miller's Now-Reading plugin display who's reading each book on t ...
• Another reason why Firefox rules
  I was off reading Adam Gessaman's site and noticed that Firefox had tossed an icon that I'd never no ...
• Text-Link-Ads Updated
  Text-Link-Ads is a nice service which I use to help pay the bills for running this site. They just r ...