Flickr image
click for slideshow

Tiga1 is a simple three column theme that I did as a learning exercise in order to understand the WordPress theme system.

Writing a new WordPress theme from scratch is surprisingly not too difficult, given the excellent documentations.

Perhaps one day I’ll write a simple tutorial on how to do it if there’s enough demand.

To install:-

  1. Download tiga.zip (version 1.0.2).
  2. Unzip it to your local PC.
  3. Upload the ‘tiga’ directory to ‘wp-content/themes’ so that you have ‘wp-content/themes/tiga’.
  4. Go to the ‘wp-admin’ presentation page and select ‘Tiga’ as your active theme.

After a successful installation go to the ‘Presentation’ tab in the ‘Admin’ interface. You will see a new ‘Tigarator’ submenu there. If you click on this tab, a page with various configurable options can be seen.

If you need to configure the theme even further, you can edit ’style.php to add your changes.

Once you’re satisfied with your changes you can go to:-

http://your-wp-path/wp-content/themes/tiga/style.php

to retrieve the CSS file produces and save it in ’style.css’.

Important: Please do this from IE! This is because ‘style.php’ generates some extra codes for IE compatibility. So doing this from IE will ensure that this extra code is generated and your pages would look consistent in IE and also most modern browsers.

You can then switch to this stylesheet by selecting a checkbox in the admin page. You may also want to do this to produce a back up of your style changes.

Localisation

If you need to localized this theme you can use poEdit to translate the ‘default.pot’ to your language. Please do not ask me questions on how to use poEdit or WP localization, try the forums for that.

Some existing language files :-

To use the above files, just download them and place it in the root of your ‘tiga’ directory.

Frequently Asked Questions

How do I enable gravatars?

To enable gravatars2, download the plugin from here. and follow the installation instructions on that page. You do not need to edit any files (unless you want to do something extra :) ) because the code to display the gravatars is already in ‘comments.php’.

If it is successful you will see little icons beside comments like you see below.

BTW, due to my lack of artistic talent, all commenters without gravatars defaults to something which looks like Ernie from Sesame Street. You can customise this by changing the image in ‘images/anon.jpg’

How do I add stuff to the right sidebar?

Edit ‘sidebar.php’ and put the following code :- 


<div class="right-widget-title">Put your widget title here</div><!-- This is optional -->
<div class="right-widget">
    <!-- Put the code for your sidebar content below here! -->

</div> <!-- right-widget --> <!-- BTW, please don't forget this closing 'div'! -->

somewhere between the section that says :- 


<!-- ########### Begin - Right Sidebar ############# -->
                                .
                                .
                                .
<!-- ########### End - Right Sidebar ############## -->
How do I add stuff to the left sidebar?

Same principle, but instead, replace right-widget-title with left-widget-title and so on. Well you guys are pretty smart so I’ll leave the details as an excercise for the reader :) .

How do I add stuff to the top of every page?

Edit ‘header.php’ and append the following code to the very end of that file :- 


<div class="center-widget-title">My Fantastic Widget Title</div><!-- This is optional -->
<div class="center-widget">
  <!-- Put your "stuff" below here -->

</div> <!-- Again, please don't forget this closing 'div' -->
How do I add stuff to the bottom of every page?

Edit ‘footer.php’ and append the following code :- 


<div class="center-widget-title">My Fantastic Widget Title</div><!-- This is optional -->
<div class="center-widget">
  <!-- Put your "stuff" below here -->

</div> <!-- Please don't forget this closing 'div'!!! -->

to above the line which says :- 


<?php wp_footer(); ?>
I’ve edited the theme and now it look a bit strange. Can you look at my html and tell me what’s wrong?

The divs are used to apply styles to HTML elements so an unterminated div would cause some visual wierdness (to use a technical term :) ) on different browsers depending on how they handle error conditions. Some can recover gracefully and hence the page looks good and some make bad guesses on where to terminate and hence makes it look bad.

BTW the tool I use is the the excellent firefox extension called ‘Web Developer’ which you can get it from here :-

http://chrispederick.com/work/webdeveloper/

Once installed, and firefox is restarted, you can see a new toolbar appear at the top of your browser. Under the ‘Tools’ button on the toolbar you can find many goodies to validate your webpage. I highly recommend this. Also there are tools to change the CSS style of any page on the fly which helps a lot when customising themes.

From my experience, most of the problems are due to external widgets. I personally need to correct a few to make them XHTML compliant (google ads are not one of those, I must say).

What are the CVS sub-directories for?

The CVS subfolders are just artifacts of the version control software that I use and can be safely deleted.

Since it takes up very minimal space and distributing it with the folders itself makes my life easier when testing on my machine with various version of the releases in different subfolders, that’s why I decided it’s not worth the trouble of deleting it before distribution.

More info on CVS can be found here.

When I tried to install this theme I get the following error:- Warning: preg_grep(): Second argument to preg_grep() should be an array in .../themetoolkit.php on line 39. What am I doing wrong?

You didn’t do anything wrong. This is a bug in the WordPress Theme Toolkit I use to power the Tigarator. It occurs when you use this theme on a fresh install without any plugins activated. The simple workaround is to activate any plugin such as the ‘Hello Dolly’ plugin and it should work fine.

Hey Shamsul, I’m thankful for your work. You’re such a nice and helpful guy. Can I buy you lunch?

Sure, there’s a “Buy me lunch!” button on the right sidebar :)

Sneak Preview

I’m still improving this theme and if you’ve downloaded the stable version above but would like to have something like you see on this site, grab the development version.

This is actually just a dynamically generated snapshot of this website. Which means you’re getting exactly what is driving this site.

Installation is as per normal :) .

  1. ‘Tiga’ literally means three in the Malay language. [back]
  2. Gravatars stands for ‘globally recognised avatars’ and are basically the icons you can see at the header part of each posting below. [back]