Tag: theme.php

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):

<?php
// 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.