5 Sep 10

How to Create a Simple WordPress Tag Cloud using wp_tag_cloud

Displaying your post tags anywhere in your WordPress blog is simple. Usually it is displayed in the sidebar area of a Wordpress site like the one you see on the right sidebar of Read more

16 Apr 10

How to Create Your Very Own WordPress Theme

Creating a wordpress theme is quite simple; well actually it’s more about editing a ready-made wordpress theme. I think that most WordPress themes were not created from scratch, but edited from the Default or Classic theme, or any other existing theme available. If you come to think of it, it would be quite troublesome to create a theme from scratch when all you can do is edit and customize an existing one that suits you best, and then call it your own. :-D

Creating a New Theme from the Default Theme

Here’s how you create your own WordPress theme from another WordPress theme. I recommend using Fifty Fifth Street or the Default WordPress theme as these themes have a clean layout and standard PHP and CSS files and codes. Both these themes use a 2-column layout so if you want a different layout, you’ve got to look for another theme.

Ok so here are the steps you should take:
1. Download the default folder (/wp-content/themes/default) to your computer using your favourite FTP client (e.g. FileZilla)
2. Now rename that default folder you have just downloaded to any name you wish (e.g. mememe)
3. Open style.css and change the current theme description (the text at the beginning of the file within the /* */ comment tags) to your own preference. Refer below for guidelines.

Theme Name: your-theme-name (Mememe)
Theme URI: the-theme's-homepage (
Description: a-brief-description (A cool and colourful theme for everyone!)
Author: your-name (Johnny Mememe)
Author URI: your-URI (
[optional] Version: a-number (1.0)
[optional] Tags: describe-your-theme (2-columns, fixed-width, 8 colours)

4. I recommend begin editing the theme files later once everything is working fine. So for now, don’t touch anything else.
5. Upload style.css back into the mememe folder in the server.
6. Now login to your WordPress Admin panel and click Themes. You should see the new theme you’ve just created! Hmmm but the thumbnail shows that of the Default theme? That’s because you didn’t change the screenshot image file. You can upload a screenshot of your completed theme later.
7. Now click Activate and you’re done! You may now customize your very own WordPress theme!

If you really have to confirm that you’re using your new theme, check the source codes of a web page in your site and look for your theme name:

<link rel="stylesheet" href="
wp-content/themes/mememe/style.css" type="text/css"
media="screen" />


You may refer to the WordPress Codex to learn more.

12 Apr 10

How to Display a List of Random Post Titles in WordPress

A list of random post titles! Yeah, sometimes displaying random posts in your WordPress blog might be good. There’s a few tutorials lurking out there in the web but some aren’t really quite comprehensive and straight forward. So, I’ll do the best I can here. Read more

22 Mar 10

Auto Update the Copyright Year in a Website using PHP or JavaScript

If you have been creating websites for years (or more than a year) I am pretty sure you have encountered the ‘copyright year’ issue. Read more

12 Mar 10

Fabrik Date Input – Get and Set the Week Number using PHP and JavaScript

This piece of short and sweet code is quite useful when you need to get the week number of a certain date for special records, joins or calculations. I use it for one of my projects involving an Inventory Management System that is based only on weekends, so most of the orders and transactions need to be recorded and filtered by week numbers.

How to get the Week Number from a Date Input

1. Create an element – ‘Element Type: Date‘.

2. Under the ‘Table date format’ and ‘Form date format’ fields, key in your desired format and include %W anywhere in the format string. The %W will return the week number for the date that you choose. For me, I do it like this: %d-%m-%Y, Week %W which will return a date like so: 01-01-2010, Week 01.

3. If you want to play around with more PHP date functions, go to

Now that was very simple and I’m pretty sure most of you already know it. But how do you extract the Week number from that string and save it to a database table? Or use it for calculations? As a table filter maybe? Ok I’ll show you how.

How to Get the Week Number and Set it to an Input Field

Here’s the code:
var orderForm = oPackage.blocks.get('form_17').formElements;
var orderDate = orderForm.get('order_information___order_date').getValue();
var orderWeek = orderDate.split('k ');

Place this code in the JavaScript tab of your Date element and set the action: blur (onBlur).

So what in the world does this piece of code above do?
var orderForm = oPackage.blocks.get('form_17').formElements;[adsense1]
This is the standard variable assignment for getting the form elements and data. Replace ‘form_17′ with your form ID. View the source code of your web page to find your Form ID or get it from the Fabrik component Forms page in the Joomla! backend.

var orderDate = orderForm.get('order_information___order_date').getValue();
This one simply assigns the value of the date input field to ‘orderDate’. Change ‘order_information___order_date’ to the name of your date input field.

var orderWeek = orderDate.split('k ');
Split? Split what? Ok, this JavaScript split() method is used to split a string into an array of substrings. orderDate.split(‘k ‘) means that the orderDate string will be split into two at point ‘k ‘ and thrown into the orderWeek array. Ok you guess, what would orderWeek[0] return you? Yup, whatever string at and before ‘k ‘.

So this brings us to the final line that updates the value of another input field in your form to orderWeek[1], which is…… the Week number!

So there you have it – How to display a week number using PHP and then send its’ value to another field using JavaScript. Try it, it’s fun.