Tag Archives: WordPress

Week 05: Cage Without a Key

Week 05: Cage Without a Key

That’s the thing about depression: A human being can survive almost anything, as long as she sees the end in sight. But depression is so insidious, and it compounds daily, that it’s impossible to ever see the end. The fog is like a cage without a key.

— Elizabeth Wurtzel

Wait, Week 05? What ever happened to Week 04? Well, my proper camera met with a bit of an accident back on Christmas day and it’s been finally sent in for repairs. It took me a bit to locate my old P&S 1. Plus, I’ve just been feeling a bit down of late. When I first realized I’d missed week 04, I planned on posting 2 photos for week 05 to make up for it. Unfortunately, I’ve not been shooting as many images and this was the only halfway decent one of the few I did have. Maybe I’ll post an extra image later in the year to make up to week 04; we’ll just have to wait and see.

Side note: I’ve been working on a new theme for this site and unlike most themes I’ve done this time I plan to do it all from scratch (sort of). I’m using a combination of HTML5 Boilerplate an 960 Grid System to build it, rather than working with an existing WordPress theme. Why? In part because I’ve not worked with HTML5/CSS3 yet and want to and in part because I feel Ian Stewart’s right when he says You should be building your own WordPress Theme Framework. …. Make it your own. When you’re done you’ll have the best WordPress Theme — for you.

Notes:

  1. This is my old Canon PowerShot S500 Digital Elph. It’s a decent camera, though its autofocus is annoyingly slow.

Author Pages with hCard & jQuery

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;
 }
 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).
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.

Fixing Now-Reading’s Admin Menu

I like using Now-Reading to track what books I’m currently reading, have read and want to read on my website. Unfortunately the plugin’s author has been too busy of late to update the plugin and one of the recent updates to WordPress caused Now-Reading’s admin menu to break (when using the single menu option). PHP is not a programming language that I’m really familiar with but I did some poking around in Now-Reading’s code and found if I changed this snip of code:

	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.

VectorLover 2 – Initial Release

As previously mentioned, I’ve been working on updating and customizing the VectorLover WordPress theme to include some of WordPress 2.7’s new features and to integrate with certain WordPress plugins which I like. This evening I’m happy to announce the initial release of VectorLover 2.

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.

Testing… 1…

I recently added a couple of plugins to this site (and a friend’s that I maintain) to try making administrating them easier.  Both sites also happen to use a plugin to crosspost to LiveJournal and now things are acting flaky.

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.

Copyright © 2004 – 2016 CoffeeBear.net. Powered by WordPress.