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.

  • Pingback: My learnings while building “WP-Jazzed” – A new Jazzed up … | Neorack Tutorials()

  • Pingback: My learnings while building “WP-Jazzed” – A new Jazzed up … WP Air()

  • Ravi Gupta

    Hi Abhinav
    Congrats on the new theme. it looks good.
    However, the earlier theme was also good. Would you mind releasing it for the world to use now?
    Thanks
    Ravi

    • Hi Ravi,

      Nice to know that you liked my previous theme so much. I am planning to release this one “wp-jazzed” in public domain.

      My previous theme was full of various hacks and many things were not done in standard wp style. Anyways I can always make the source available if you want to play around and clear the mess. Lemme know if you want that.

      Regards,
      Abhinav

  • Ravi Gupta

    Hi Abhinav

    That would be nice. I would be happy to do that.

    Thanks
    Ravi

  • Ankur

    Abhi,

    You run a nice blog. I think your icons for FB and RSS feed are especially cool – did you design them yourself?

    • Thanks Ankur.

      No i didn’t design those icons, i must say i rather stole them from elsewhere on the web.

  • Ravi Gupta

    Hi Abhinav

    It would be great if you could share the source of the earlier theme based on Google Code. My email is ravi.gupta.email [at] gmail.com.

    Thanks

    • Hi Ravi,

      Well i m working on that, hopefully it will be out soon 🙂

  • Marcin Wisniowski

    “WP-Jazzed is not tested on IE6 (since I don’t have one) and will not be.”
    Thank you for that.

  • guydegraff

    You have got a really excellent site! Keep up the good work, I look forward to seeing much more of your posts.