I’ve been tossing around the idea of revamping CoffeeBear.net’s theme for ages now. Many months ago, I started building a new theme entirely from scratch but I ran into some difficulties with it and ran out of time motivation for doing that. Then a while ago, I saw the Romangie theme get posted to the WordPress Themes directory. I liked most everything about the theme, so I decided to dump the what I’d started working on and build a child theme instead.

And that brings us to today when I decided to go ahead and pull the trigger activating the new look. Most of changes are centered around two areas: support for the Now-Reading Reloaded plugin[ref]Though I see after activating the new theme that I forgot to customize Now-Reading’s Tag page. Whoops, I’ll have to get that fixed ASAP![/ref] and switching up the colors. My colors all come from this photo being run through the Colorpeek service to get this palette.

Hopefully this fresh look works well for all my faithful visitor(s); but if you do find a problem please let me know.

One of my goals for this year[ref]I don’t really do new year resolutions, but I do occasionally set personal goals for the new year around January 1st.[/ref] is to write more here; so while I don’t have a single idea that feels worthy of a full post, here’s a dump of various things floating around/through my skull today.

  • Is today stupid driving day or something? I’ll grant I left for work a few minutes later than usual, but it seems odd that so many people would continually be pulling out into moving traffic (from driveways and side streets) and then going so slowly[ref]Example in a 40mph zone, a car pulled out of a driveway less than half a block ahead of me, pulled across the lane I was driving in into the other lane and then just as I caught up to them they pulled right back in front of me.[/ref]. Fortunately the roads were relatively clean this morning, so I was able to stop before plowing into any of those idiots, but still….
  • Back in the day when Javascript was new to the web, many sites used it to frequently touch my browser in the bad way. So I quickly grew to hate it and pretty much ignored/disabled it for years. In more recent times, Javascript usage has grown up/cleaned up its act. To the point where I’m actually interested in learning to use it. So I’ve been searching around for some decent tutorials but haven’t had a lot of luck. Most tutorials either assume you already know quite a bit about Javascript or are so extremely dated that they’re useless. I did run across 2 sites with tutorials that don’t seem to be too awful: Codecademy[ref]Codecademy gives a decent general knowledge of Javascrip. Though the site is far from perfect, with bugs in the lessons that prevent you from completing them or with questions that unclear in what they are looking for and hints that can be utterly useless[/ref] and jQuery for Absolute Beginners[ref]While technically these tutorials cover jQuery (a Javascript library) rather than “pure” Javascript and while covering an older version of jQuery (1.2.6), it still has been very interesting to go over so far.[/ref]
  • I’ve been thinking about about redesigning this site, but I’m trouble deciding what to do. I’ve got some ideas floating around in my skull, but I might hold off until I can look into working up a logo.

At WordCamp San Francisco 2011, Matt Mullenweg gave the a presentation entitled State of the Word. During the presentation, he talked about the 2011 WordPress User/Developer survey they did.

Then today they released an anonymized copy of the data as a compressed CSV file. I took a quick look at the CSV and whipped up the following MySQL script to load the data.

CREATE TABLE `survey` (
 `year_submitted` year,
 `how_use` varchar(255) DEFAULT NULL,
 `job_type` varchar(255) DEFAULT NULL,
 `c_do` text,
 `c_cms_blog` varchar(255) DEFAULT NULL,
 `c_customize` varchar(255) DEFAULT NULL,
 `c_number` varchar(255) DEFAULT NULL,
 `c_percent` varchar(255) DEFAULT NULL,
 `c_done_with_wp` varchar(255) DEFAULT NULL,
 `c_living` varchar(255) DEFAULT NULL,
 `d_do` text,
 `d_cms_blog` varchar(255) DEFAULT NULL,
 `d_customize` varchar(255) DEFAULT NULL,
 `d_number` varchar(255) DEFAULT NULL,
 `d_percent` varchar(255) DEFAULT NULL,
 `d_done_with_wp` varchar(255) DEFAULT NULL,
 `d_cost` varchar(255) DEFAULT NULL,
 `d_living` varchar(255) DEFAULT NULL,
 `u_do` text,
 `u_installed` varchar(255) DEFAULT NULL,
 `u_installed_other` varchar(255) DEFAULT NULL,
 `u_customize` varchar(255) DEFAULT NULL,
 `u_living` varchar(255) DEFAULT NULL,
 `x_living` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE = MyISAM COMMENT = 'WordPress 2011 Survey Results';

LOAD DATA INFILE '/var/lib/mysql/anon-data.csv'
 INTO TABLE `survey`
 (`how_use`, `job_type`, `c_do`, `c_cms_blog`, `c_customize`,
`c_number`, `c_percent`, `c_done_with_wp`, `c_living`, `d_do`, `d_cms_blog`,
`d_customize`, `d_number`, `d_percent`, `d_done_with_wp`, `d_cost`, `d_living`,
`u_do`, `u_installed`, `u_installed_other`, `u_customize`, `u_living`,

UPDATE `survey` SET `year_submitted` = YEAR(NOW());

This has only been tested on MySQL 5.1.54-1ubuntu4. It should work on any recent copy of MySQL, but YMMV. Also, I added 2 additional fields to the table. One is a simple ID field to make it easier to reference individual responses while the other is `year_submitted`. I added the latter field; so if they reuse this survey next year, I can simply add that year’s responses to the same table and track the differences. If I find the time, I may try digging into the data to see if I can find anything interesting in it (but don’t hold your breath on me finding the time to do so).

The latest, greatest version of WordPress was released yesterday. It comes with a whole lot fixes and new features. One of those new features is an admin bar similar to the one used on WordPress.com; however the admin bar only includes specific links rather than being automatically populated with all the various links that my install of WordPress has (from various plugins). I found the lack of those links for one particular plugin particularly annoying. A quick bit of research and a little bit later, I developed the Now-Reading Admin Bar Menu plugin.

I also noticed after the update that one of my client sites wasn’t working correctly. It turns out there’s a bug in WordPress 3.1 which breaks category exclusion. On my client’s site, I was using this code:

function exclude_category($query) {
$cat_id = '-'.get_cat_id('meetings');
if ( $query->is_home ) {
$query->set('cat', $cat_id);
return $query;
add_filter('pre_get_posts', 'exclude_category');

Fortunately that bug I linked to also includes a workaround. By changing the above bit of code to read as follows, I was able to fix my client’s site. ^_^

function exclude_category($query) {
$cat_id = '-'.get_cat_id('meetings');
if ( $query->is_home ) {
$query->set('category__not_in', array($cat_id));
return $query;
add_filter('pre_get_posts', 'exclude_category');

While I’m definitely not the designer that any of the people who created these beautiful hCards, I was greatly impressed by them. In particular, I liked the personal hCard created by Tim Van Damme and decided to make my own version of it. Only since I’m using WordPress rather; than a static site, I wanted the page to be generated automatically from info stored with my user profile within WordPress. Unfortunately WordPress does not by default store all the information I wanted to display as part of the user profile.

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;

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() {

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;

 $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">
 <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>
 </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">
 <?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; ?>
 </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_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
 wp_register_script('jquery-ui-core', ("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"), array('jquery'), '');
} ?>

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).
Update 3: Hmm, now that I look back at this old post I realize a couple of things: 1) several of the links I’d intended to be here are missing (since corrected) and 2) this post was written worse than I thought it was.