Habari-powered blogging: Tweaking your theme

First thing: I’m *not* a coder, but I’ve got the next best thing: search engines like Bing, Google and DuckDuckGo on my side. For every theme I’ve used on the blogging software running my blogs (janetalkstech.com and fadingwhispers.org/home), I’ve ended up editing the theme’s files to include some small features I admired in previously used themes (see a list of available themes for Habari). This particular post will attempt to go over little tweaks I’ve made to the current theme (Georgia by Thomas Silkjรฆr) running this blog as of 06/15/2010. By the way, if you’re running Habari, try Georgia sometime or any of the other themes. It’s a beautiful two-column theme with an emphasis on gorgeous typography and excellent use of white space..

Before I continue, here are some assumptions I’ve made:

  1. I’m assuming that you’re familiar with content management systems. Examples of content management systems or CMSes would be the famous WordPress, Drupal, Joomla, etc. Habari is another such system and it powers janetalkstech.com currently.
  2. I’m assuming you’re able to edit files on your webserver. Bonus points for you if you even installed WordPress yourself.
  3. I’m assuming you have file backups of the original unedited files for your theme because you will (like I have) make some changes and attempt to undo said changes only to discover you made things worse. ๐Ÿ™‚
  4. I’m assuming you are not averse to trying things and finding things by trial and error.
  5. Please don’t hold me responsible for any bad things that may or may not happen to your theme/files/blog/computer/person/house from using any code snippets posted here. I’m not a security ninja (see my About page).

That said, a vanilla (plain) installation of the Georgia theme for Habari will leave your frontpage (index.php) cluttered with the full-length posts. I say “cluttered” because I typically include pictures and/or embedded video in my blog posts. Leaving full-length posts on the main frontpage can cause problems. I wanted my posts on the frontpage truncated for the reasons below:

  1. Performance reasons: I have pictures and videos (usually) in each post. Have all the pictures and/or videos in all 4 posts load at the same time increases the load time of the homepage. Internet users are big fans of pages that load quickly so doing this will be a step towards that goal.
  2. Being smart and optimizing: Having the full posts loading on your home page is an example of information overload. Besides that, you’re essentially discouraging readers from clicking through to read the posts which will make any form of analytics hard to interprete.

Since I couldn’t very well code some plugin to do this, I had to mimic another Theme’s method of implementation. Specifically, I took a look at the theme files of the Dilectio theme because it shortened posts on the frontpage by default. After trial and error, I found what I was looking for. In the theme.php file, I found a line of code that specified how much of the posts to display before displaying the “read more” link. For preventing the full-length of the posts from being displayed on the home page of your blog, here’s the relevant snippet to alter (code culled from the theme.php file in the Dilectio theme for Habari):

// tell Habari which class to use
define( 'THEME_CLASS', 'Dilectio' );
class Dilectio extends Theme
	//Execute on theme init to apply these filters to output
	public function action_init_theme()
	        //I snipped out a bunch of irrelevant (for this post) code
		// The snippet below puts out a reduced size version of the post when there are multiple posts displayed
		Format::apply_with_hook_params( 'more', 'post_content_out', _t('Read More') . ' ยป' , 100, 1 );

That’s all you need to insert into your theme.php file under the public function action_init_theme() block to shorten posts. That done, the next issue I faced with my theme was figuring out how to allow gravatars to display with proper formatting.

With the gravatars plugin for Habari, you’re expected to install this code snippet in the ‘relevant’ files:

<img src="<? echo $comment->gravatar ?>">

It didn’t take me long to figure out where to insert the code, but the lack of a readme file with the plugin didn’t help matters. I can imagine how daunting this must seem, but then again, Habari is really young and forthcoming iterations will address these user interaction issues. In the case of the gravatar plugin, the relevant file to be edited was the comment.php file. Specifically, you should insert the code snippet as shown below:

<li id="comment-<?php echo $comment->id; ?>" <?php echo $class; ?>>
<img src="<? echo $comment->gravatar ?>">	
<h2 class="comment_author"><?php echo $comment_url; ?> <em>at</em> <a href="#comment-<?php echo $comment->id; ?>" title="Time of this comment"><?php $comment->date->out(); ?></a></h2>

If you’ve done that, you’ll see that your comments section will look like this:

I wasn’t quite satisfied with the layout so I added some changes and here’s the code that I added to make my comments section a little prettier:

<img align="left" style="padding:4px" src="<? echo $comment->gravatar ?>">

I added the align and style properties to the img tag which can alter the layout. See what my comments section looks like now:

Cheers and that’s all for now. I’ll update this post with corrections or additions. Feel free to comment on any inaccuracies, etc. ๐Ÿ™‚ For those wanting to dive deeper into Habari and themes, check out the Geek media’s articles on Habari. As always, if you have questions, pop into the Habari IRC channel (#habari) on Freenode.

Here’s a tip: Join the Habari Dev list so you can get a feel for the developers behind Habari. Then, head over to IRC and use JibbyBot to pass messages to them! ๐Ÿ˜› To do that, you say: “JibbyBot tell blah blah” and it’ll store your message for the next time the person logs in. Pretty nifty and I had a problem solved that way without me having to monitor IRC constantly. The IRC logs are here.

Publishing posts in Habari

So, I finally got around to re-downloading Windows Live Writer which IS the dominant desktop software for creating/editing blog posts. Setting up a WordPress blog is very easy in Windows Live Writer. In Habari, there’s just a little more work that needs to be done to simplify things. For starters, the metaweblogAPI method for posting is not enabled by default in Habari. A plugin does that trick and unfortunately, the documentation of that plugin does little to help you set it up through blogging clients like Windows Live Writer (WLW). Thankfully, andyc has a good post on setting up your blog via the metaweblogAPI method (it’s a link that looks like this <blog-url>/xmlrpc. Make sure you have activated the metaweblogAPI plugin and specified directories to upload to).metaweblog

Furthermore, a Habari developer (michaeltwofish) informed me that Habari supports the Atom Publishing Protocol so I decided to give that a shot. Be aware that WLW will be unable to auto-detect your blog publishing platform at first and it will present you with a screen to pick your publishing protocol of choice as seen below. In the section where it asks for “Service document URL,” I put the atom feed of my website there on a hunch and it worked! In fact, this post is my first post via WLW using the Atom Publishing Protocol and I hope it works!

This Atom Publishing Protocol method is not without its issues as I’ve already been greeted with this screen that tells me WLW was unable to find my blog’s categories (along with a slew of other things it can’t do. See Picture 3).


Oh well, Picture 1 shows the screen you will be greeted with after WLW fails to auto-detect your blog’s publishing protocol.

Picture 2 is just confirming my configuration  in WLW.

Picture  3 just how the capabilities of the Atom Publishing Protocol to my blog.

Select your blog publishing protocol




Using Habari from a user’s perspective

I’ve been a WordPress user for the longest time. I love the easy out-of-box experience of WordPress. However, I got bored and began wanting to something else that was different from all the content management systems out there. I’ve toyed with Drupal, but there are way too many things to click just to get things done. Then, I heard about Habari again and decided to give it a try.

The installation process is actually faster than the famous 5-minute install of WordPress. Habari’s schtick is about building a solid foundation and letting plugins do the rest of the work. This is good from a developer’s perspective, but cumbersome for a user. I will delve into the reasons which are exactly why I’m struggling a little bit with Habari.

Here are the issues (for me):

1) Habari has 2 main versions: the stable version and there’s trunk version of Habari. The developers, I’m presuming, play with the bleeding edge versions a lot and this is evidenced by the large number of plugins marked ‘-trunk’ under the Plugin directory of the Habari Project.
2) Half the time, plugins I have an interest in using either: don’t work for the version of Habari they are listed for or (ii)work for the ‘bleeding edge’ version instead of the stable version. I know developers like to live dangerously, but I wish there’s be a set of tried & true plugins that will make the experience of using Habari less frustrating. I suspect things are simply being labeled wrongly.
3)For the plugins that do work, there’s no smooth way of finding out if there are upgrades except for browsing manually to the plugin folder on the Habari site or visiting the author’s page. I’d recommend providing a subscription method (which won’t scale if they get bigger) for now so that I can subscribe to updates of plugins I’m interested in.
4)Lastly, a lot of the current themes for Habari that I’ve encountered require plugins to function as intended. I’ll use the Dilection Theme as an example. Currently, this theme requires the following plugins: blogroll, monthly archives and flickrfeed. I was able to get Flickrfeed to work after much guidance from the very helpful developers at the #Habari IRC channel on Freenode. The last two simply cause the plugins.php page to emit a 1-line message about a “fatal error” and I have to manually delete the plugin folder before that message will go away.

I pride myself on having a very little bit of a technical bent, but so far, Habari’s making me feel pretty helpless. However, it’s not all gloom and doom. The Habari Project obviously hopes that competent people will be willing to step up to the plate to develop for the platform. The plugin ecosystem is what will make or break Habari and I truly hope that by this post, more people will be interested in knowing more about Habari and might even get inspired to building themes & plugins! ๐Ÿ™‚ In fact, if I visited the #Habari channel on IRC, the chances are very good that I’d stumble into one of the Habari devs and they WOULD talk me through figuring out what the problem with a particular plugin is. That’s just how awesome the Habari developers are. ๐Ÿ˜€ It’s just that after doing that 3 or 4 times, I worry about being too imposing or that I’m bugging someone.

As a content management system with a somewhat stable assortment of plugins, Habari works great. There are a few design bugs here and there, but I’m mostly happy with it and that’s why I’ve stuck with it thus far. For thiose out there who are wondering what does work with Habari 0.6.2, here are some recommended plugins I’ve got enabled & working on my blog:

  1. Code Squeezer 0.4 is the first plugin I’d recommend you install. It literally allows you to insert any code you like into the header, sidebar or footer. I use the Code Squeezer for squeezing in my Google Analytics tracking code and some super-secret other stuff. ๐Ÿ™‚
  2. The Flickr plugin comes with a default install of Habari. It’s a beauty and I highly recommend it if you have a Flickr account. Unlike the built-in Habari media management silo, the Flickr plugin allows you to insert image thumbnails and is configurable! In this post about viewing chkdsk logs, the pictures were uploaded using built-in media management utility in Habari, but it inserts the pictures at the uploaded file size! Not good behaviour at all.
  3. Habari Media Silo: I love that they built media managment into Habari, but right now, it’s rather rudimentary. If I uploaded a huge image file and wanted to insert a resized version of the picture into a post, I can’t do that right now. Yes, I could google for the html code to manually resize the picture myself, but I would recommend that they borrow a page or two from the Flickr plugin’s playbook and provide an option to insert a thumbnail of the picture or a resized version of the picture.
  4. Habari Backup 1.5 by Scott Merrill (thanks to Michael Harris, one of the cool Habari developers for turning me on to this plugin in my post on backing up data). It works as advertised and I’m sleeping much easier at nights. ๐Ÿ™‚
  5. Youtube Media Silo – need I say more? It simplifies insertion of my uploaded Youtube videos to my blog and again, it works as advertised!
  6. Smugmug Media Silo – again, excellent plugin for simplifying insertion of my media from my Smugmug account
  7. WordPress Importer – a clear must for people migrating from WordPress to Habari. They are smart to have this feature developed and working because Habari has some WordPress features in terms of the administrative backend layout.

Before I finish, I *have* to commend the Habari developer(s) behind the design of the administrative interface and the default “Charcoal” theme. Go to my front page (Jane Talks Tech!) and you can see how tasteful the greys and text mix together. In composing a post, I love how the focus is on the title bar and the textarea for entering your blog post or page. Any plugins that are enabled are simply available in a row of clickable buttons and they expand very gracefully when clicked. If you are curious about what I’m talking about, take a chance and install Habari. Before moving my tech. blog over to Habari, I installed several test installations of Habari and had a chance to make sure that there were no showstopping hindrances to successfully running my blog with Habari. So far so good. I hope this post will be seen in the light of constructive criticism with which it was meant.

Shoutout of members of the Habari cabal who have helped me on my road to becoming a Habari user (andyc, michaeltwofish, dmondark, mikelietz, lildude, rmullins, ringmaster, and many others in the #Habari channel on the Freenode IRC server! ๐Ÿ™‚