My learnings while building “WP-Jazzed” – A new Jazzed up wordpress theme

Welcome the new wordpress theme “WPJazzed” for my blog. Seeing a plethora of jazzed up wordpress themes on web, I decided to start working on this new theme. In this blog post I will list my various findings while building “WPJazzed”.

Why a new theme?
I decided to move on with a new theme mainly because of the following reasons:

  • Helpful Feedbacks: I received feedbacks complaining about the unorganized structure of my previous theme and I do agree with them. 90% of my blog posts were under “Web Tutorial” category, leaving tags the only way to reach posts of interest.
  • Deciding the Niche: Many feedbacks pointed towards “What’s the targeted developer group of my blog?”. And indeed with no proper categorization and structure in place, its tough for a new user to identify the niche of my blog. Mainly because I have been blogging from javascript css fixes to memcached and libevent hacks
  • Boring googlish interfaces: As the world is coming out of the boring googlish interfaces and moving towards more jazzed up user interfaces, I decided to move on too.

So what’s the niche now?
Depending upon my blog archive and blogging interests, I finally came up with 7 categories as mentioned below:

  • PHP: Find all PHP related stuff (frameworking, PHP internals etc) under this category with a few exceptions (see below)
  • XMPP: All posts related to XMPP+Jabber technologies go under this category
  • WordPress: Find all wordpress hacks and How-To’s here. In case a post is related both to PHP and WordPress, it will be categorized under WordPress
  • Web Development: All posts related to HTML, Javascript, CSS, jQuery, Adobe AIR, Openlaszlo goes under this category
  • Open Source Projects: This category is dedicated to various open source project releases.
  • Memcached: This can be renamed to something like “High Scalability” in future as I plan to write more on memcached, mongodb, couchdb and related technologies
  • Tech News: All posts related to Google, Yahoo, Microsoft and other biggies fall under tech news

What’s new in WPJazzed?
Apart from the new look and feel, WPJazzed come in with:

  • Threaded Comments: I have utilized WordPress Threaded Comment plugin to enable replies on comments too.
  • Widgetized Sidebars: WPJazzed provide 2 type of custom sidebar widget layout. First one being a tabbed version and second one being a classic single column version.
  • Widgetized Footers: This is something which I explored recently. Allows you to update the footer section through the theme option panel with no HTML or CSS changes required
  • Open Source Project Download Plugin: Developed a custom plugin for showing my open source project download count. It is still in alpha mode.
  • New logo: Finally I have a logo for my blog. A very basic one built using using pixlr online photo editing and building tool

Lessons learnt while building WPJazzed
Below are a learnings from the whole process of building WPJazzed:

  • Resizing Post Images: I decided to shrink the post content column width and that’s where the real trouble starts. I saw my older post images were overflowing the column. Below is the jQuery hack for resizing post images:
     /* Image width in the posts can be max 550px */
    $(window).load(function() {
    	$('div.singleEntry img').each(function() {
    		$(this).removeAttr('width');
    		$(this).removeAttr('height');
    		current_width = $(this).width();
    		current_height = $(this).height();
    		aspect_ratio = current_width/current_height;
    		if(current_width > 540) {
    			new_height = 540/aspect_ratio;
    			$(this).width('540px');
    			$(this).height(new_height);
    		}
    	});
    });
  • Threaded comment hack: I also had to customize the threaded comment plugin javascript file since I wanted to change the default behavior of the plugin, which also copies the comment form heading. Here is the small hack done at the end of movecfm function:
    	if(jQuery('#commentform').children('h6').css('display') == 'none') {
    		jQuery('#commentform').children('h6').css('display', 'block');
    	}
    	else {
    		jQuery('#commentform').children('h6').css('display','none');
    	}
           return true;

Is WPJazzed released for public domain?
Not yet but YES will be released soon. There are still a few issues and optimization that I want to make before releasing WPJazzed for public domain. Also I wanted to test it against a real traffic before public release.

Do report any layout or functionality bug which you might encounter.
Leave your feedbacks and suggestions for the new theme.

PS: WP-Jazzed is not tested on IE6 (since I don’t have one) and will not be.