My hResume Plugin

I’ve had a few requests in the past week for a copy of my enhanced hResume plugin, so I decided it was finally time to post it to my site. The hResume plugin you will find below was used to generate my entire resume as seen on the Resume page.

Before I get into the details, much of the credit should go to the Spur Team who built the original hResume plugin.

Background

When I first started thinking of adding my resume online I thought for sure I’d be writing a plugin from scratch. In fact I did start down that path. After some frustration, I went searching for a better solution. When I first found the hResume plugin I was extremely pleased with its ease of use and functionality. However, there were a few bells and whistles I was looking for in my resume.

In particular, I was looking for a more interactive and modern web experience, as that is part of my profession. A tag cloud seemed like perfect model to use for displaying experiences on a personal resume. Each experience is displayed in the typical tag format with higher experience levels indicated by larger font, typical to a tag cloud. Each experience item can be selected and additional deatils are faded in below - nice rich UI.

Next I was tired of constantly updating my resume in numerous places online - first in Word, then copy-paste to my site, etc. I wanted the ability to manage my resume through a web interface, in particular through my personal website admin area. Then after I was done editing, I wanted the application to automatically spit out a Word and PDF document. Unfortunately, I have yet to find a FREE Word PHP library (go figure, it is Microsoft after all), but was able to find a fairly decent PDF library, fpdf. I integrated the library into the plugin so that a PDF document is generated each time the resume is updated.

Setup/Integration

The plugin is your typical WordPress plugin. Copy (ftp) the plugin up to your WordPress plugins directory and proceed as your normally would. The administration is done in the My hResume section within Settings.

I have not spent the time to make the available skillset tags dynamic, so if you’re not a developer, and wish to change the skills options, you’ll need to edit the my-hresume.php file. It’s a simple change and should be able to be made by all. Basically, in the my_hresume.php file you’ll need to change/add/delete the tags (see below). You can search for EDIT - it should be around line 27.

// EDIT

$myresume_options = 

    array(

        'tag_title'     => 'Technical Skills',

        

        // Skills for each tag, broken out in details page (can add/remove)

        'skills' => array(

        // Key          => Display Name

        'software'      => 'Software', 

        'language'      => 'Language', 

        'db'            => 'Database', 

        'os'            => 'Operating System'),

Download Now (927.3 K)
my-hresume.zip

Please reach out and leave a comment if you integrate this plugin into your site. Feel free to leave a link.

Color Paper Ajax Tabs Fix

Background

For the most part, I have been very happy with the Color Paper wordpress theme. As with anything free, there are usually a few gotchas. The broken ajax tabs were the only technical problem I’ve had with the theme thus far. Since I haven’t spoken with the author, I wasn’t sure what the initial intentions were for the ajax tabs.

It looks like the tabs can be setup to support true AJAX functionality. However, if you look into the sidebar.php file you’ll notice the theme itself includes the HTML contents directly within the initial response, rather than fetched with client side JavaScript via AJAX calls. For me, the additional overhead of loading all three tabs isn’t that bad, and therefore I have decided not to fully implement a true AJAX tab control.

With that said, the below steps will get your side bar tabs up and working in the Color Paper WordPress theme. Kudos to the author and Smashing Magazine for yet another great theme.

As with any javascript, you can choose to either include it in a separate file or directly within the HTML. For several reasons, I would recommend always including the majority of your javascript in an external, browser cacheable, file and reference it from your HTML.

Recommended Fix (external file)

1. Download ajax.tabs javascript file.
2. Upload the javascript file to your theme’s js folder (wp-content/themes/colorpaper/js).
3. Include a reference to the javascript library in header.php as indicated below, or by other javascript include mechanism if installed, such as wp_js.

<script 

     type="text/javascript" 

     src="<?php bloginfo('template_directory');?>/js/ajax.tabs.js">

</script>

Quick Fix

1. Copy the below javascript into header.php.

<script language="JavaScript" type="text/js">

jQuery(document).ready(function()

{

        jQuery('ul.tabs a.tab').click(function() {

                

                jQuery('div#' + jQuery('ul.tabs a.active').attr('title')).toggle();

                jQuery('ul.tabs a.active').toggleClass('active');

                                                

                jQuery(this).toggleClass('active');

                jQuery('div#' + this.title).toggle();

                return false; // cancel event bubble

        });

});

</script>

2. That’s it.

Stay tuned over the next few days for another Color Paper theme enhancement guaranteed to increase page load times and improve the overall user experience of your site.Hint: large images.

Drop me a line if you have any questions or problems implementing the fix.