Joomla Template Tutorial (Part 3)

This is Part 3 of the Joomla Template Tutorial series. Part 1 is here, and Part 2 is here.

By now, you should have entered all the necessary code for your Main Body & Module Positions.

8. Enter the code for the “header” tags

We’re still not done yet with index.php. Make sure that this file is still open in your text editor.

Now, delete the code from the beginning of the file until the <head> tags.

Replace it with the code below:


<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $GLOBALS[mosConfig_live_site]; ?>/templates/<?php echo $GLOBALS[cur_template]; ?>/css/template_css.css" rel="stylesheet" type="text/css" />
</head>

9. Change paths of all images

Now we need to change the paths of your images. If you notice, your image tags have the following format: <img src="images/filename.gif" />

This will create problems when your template is installed, because when you upload your template, the paths to your images will change, depending on where Joomla installed your template.

Thankfully, there is an easy way go around this. You need to use the Find & Replace function of your text editor.

Find all instances of this code snippet:

<img src="images/

And replace it with this:


<img src="<?php echo $GLOBALS[mosConfig_live_site];?>/templates/<?php echo $GLOBALS[cur_template];?>/images/

Your code should now look something like this:

Save your modifiedindex.php file.

10. Create the XML file.

You will need to create an XML filewhich will contain information about your template. This is also required by Joomla, because Joomla looks for this XML file when you install a template from the Administrator.

Open your favorite text editor, and create a new document. Paste the following code:


<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template" version="1.0.0">
<name>template_name</name>
<creationDate>date</creationDate>
<author>author_name</author>
<copyright>copyright_info</copyright>
<authorEmail>author_email</authorEmail>
<authorUrl>author_url</authorUrl>
<version>template_version</version>
<description> template_description</description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>images/image_filename</filename>
<filename>images/image_filename</filename>
</images>
<css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>

We’re not done yet. You need to replace the highlighted words with the following:

What Replace with
template_name Name of your template
date Date that you created your template
author_name Your name
copyright_info Copyright information of your template. Example: GNU/GPL, etc.
author_email Your email address where people can contact you.
author_url Your website’s URL.
template_version Version of your template. If this is the first time you modified your template, you can just put 1.0
template_description Brief description about your template.
image_filename Filenames of all the images you used in your template. Double check with your /template_name/images folder to make sure that you got all the filenames correctly.

If you have more than 2 images, simply add another line of <filename>images/image_filename</filename>

Your XML file should now look something like this:

Save the file as templateDetails.xml and place it in the root of your template directory.

11. Create template thumbnail

Template thumbnails allows you to preview your template from the Joomla Administrator. If you plan to distribute your template to other users, it is highly recommended that you create one.

To create a thumbnail, take a screenshot of the mockup you made previously.

Resize this screenshot to approximately 200px by 200px. Then save this as template_thumbnail.png in your template directory.

Alternatively, you can use a blank thumbnail in the meantime. I usually just use a blank thumbnail while I’m developing a template, & just make the screenshot afterwards. You can click here to download the blank template thumbnail that I use.

Note: If you don’t want to use the .PNG extension (for example, you want to save it as template_thmubnail.GIF), make sure that you also change the filename in your templateDetails.xml.

12. Review your directory structure

It’s time to review the directory structure. Please make sure that all the files are in their proper folders. You might want to double check your XML file, too.

13. Zip it

We’re almost done. Now zip your entire template directory. You can use your favorite compression utility such as WinRAR, WinZIP, IZArc.

You can also use Windows’ built-in compression: Right click on your template folder, select Send To > Compressed (zipped) Folder.

You should now have a file called template_name.zip (or in my case, chette_v5.zip)

14. Install

Finally, it’s time to put your template on a test drive.

  1. Login to your Joomla Administrator.
  2. From the menu, navigate to Site > Template Manager > Templates.
  3. Click New.
  4. You will now be asked to install your template. Look under Upload Package File.
  5. Click Browse, & locate your zipped template in your computer.
  6. Click Upload File & Install.
  7. If all goes well, a success message will be displayed. Click Continue.
  8. You will be brought back to the Template Manager.
  9. Select your new template from the list (click on the radio button), & select Assign.

Now preview your template by going to your website’s public URL. You can also preview it by going to Site > Preview > In New Window

15. Finishing touches

Now that you have finally installed your template, you probably would need to make some minor changes to your index.php or template_css.css files. Joomla provides a convenient way to do this. Simply go to the Template Manager, select your template, and click either Edit HTML or Edit CSS.

Some of you may have created unique names for your module positions that are not set by default in Joomla. For example, if you have a module position called my_module:


<?php mosLoadModules ( 'my_module' ); ?>

If this is the case, you need to define my_module in Joomla:

  1. Login to your Administrator, and from the menu, navigate to Site > Template Manager > Module Positions.
  2. Select an empty textbox under Position, & type my_module.
  3. Click Save.

And finally, you can now play with your modules, most especially your menu items. This is the most enjoyable part of template development – there’s nothing like seeing your template take shape in real time.

You might also want to check out this article: Module Basics: Putting custom HTML content on the sideblocks. It’s a pretty old article, & was written for Mambo, but most of the concepts still apply with Joomla 1.0.12.

16. The end

It’s been a long ride writing this Joomla Template Tutorial, but I sincerely hope you enjoyed this.

Please feel free to give the link to this article to those who you think will benefit from it. Should you have any corrections or suggestions, just contact me or post in the comments below.

If you were able to develop your template thru this tutorial, just send the URL over. I’d love to take a peep.

I also would like to recommend that you join us in the Joomla Forums. There’s a sub-forum over there dedicated solely on template development. You’ll love the community, & I personally have gotten a lot of invaluable advice from it.

Thank you for taking the time reading this series.

Customize the feed icon in Fireworks

Fireworks users don’t need to feel left out. Or at least when it comes to the feed icon.

Previously only available for the Big Snobbish Graphic Editors (Illustrator, Photoshop, etc.), the color of your feed icon can now be customized using Macromedia Fireworks. You can download the file here: feed-icon-chette

In case you didn’t know …

A feed icon is placed on websites (or content items) to indicate that the content is also available via web syndication (“feeds”). It was originally created for Mozilla Firefox’s Live Bookmarks, but has been proposed to be used universally for feeds. Take note that it is meant to be used for open formats (e.g., RSS 1.0, RSS 2.0, Atom, etc.)

Although the feed icon is not restricted to one standard color, it is still highly encouraged that you use its canonical color: orange. Color is a visual cue, and aids in the usability of websites.

Shying away from the SEO brouhaha

Yes, I do get your emails — questions about Search Engine Optimization (SEO), asking for advice, tips, etc. Some have heard of the work I did, while some simply analyzed my rankings in Google.

However, because of the sudden brouhaha on SEO, I’m a little uncomfortable talking about it in detail. “SEO Consultants” have sprouted out of nowhere, giving two-hour talks on things they learned from books & other SEO online references, have optimized less than 5 websites, & charging my clients an arm & a leg for their “expertise.”

They talk about key phrases as if it should be the sole content of your website. I have met 3 consultants who even lectured me about the importance of, egad, meta tags & doorways.

Yes. My hesitance is due to my fear that jumping in the SEO hubbub might even further overshadow the value of content.

Content is king.” These are the words I have been hearing since 1997 when I put up my first website. I scoffed at it & simply regarded it as just another buzzword. It took me quite a few years to take these words to heart.

As the years went by, I got more & more involved with websites — hundreds of them — either as a developer, a Project Manager, a writer, a consultant, a designer, or an owner. I started to see how content have magically gave these websites the rankings & the visitors. Heck, a lot of our website even got the top rank in Google without consciously applying a single SEO technique.

Try it: For the time being, forget about your technorati tags, blog pings, invisible key phrases, doorways, Google bombs, & submitting to link directories. And yes, even forget about your search engine friendly URLs. For a couple of months, just concentrate on giving the best quality content for your target market.

Notice how your key phrases’ position & density come out naturally. Notice how this, even more than hundreds of tips combined, can give you that rank that you have never even dreamed of grabbing.

I’m not saying that optimization doesn’t help, because it does. But how do you expect to put in the finishings in a house without the structure? You need to go back to the basics & build the foundation of your website. Only then could you discover what optimization your site really needs. And only then could you realize the true potential of your page rank.

Content is king. After all, even the most poorly written buzzwords can carry a lot of sense.

Search Engine Friendly Redirection

Website redirection” means that when a user goes to one of your web pages, you automatically lead him to another site (or page). This is particularly useful if you have changed your domain name or site structure.

In chette.com, you would notice that I use this. If you go to the URL www.chette.com, you are actually redirected to www.chette.com/main. Main is a folder in my public html. I put my content files in subfolders in order to keep my public_html directory neat, and to enable me to test an upgraded CMS before making it accessible to the public.

The old-school way of redirection was thru the infamous meta refresh tag. However, websites which contain this tag are already being tagged as spam by search engines.

A better alternative is to use a 301 or 302 redirect. These are called response codes. A more technical definition is available, but in a nutshell, if you use a 301 or a 302 redirect, you are just automatically directing your visitors to your new URL.

301 returns a user-agent response that your website has moved permanently to a new location. A 302, on the other hand, returns that your website has only moved temporarily.

What to use

There are a lot of arguments on 301 vs. 302. Some would favor one over the other, claiming that 302 should be strictly used for temporary locations, that 301 is preferred by search engines, etc. etc. However, from my own experience, it is most effective to use both.

Let’s say you have gotten a new domain name or URL.

First, submit this to Google’s index, but make sure that you retain your old domain (or URL) for the time being.

Then, put a 302 on your old domain name. That way, your old domain name and its rankings in Google are retained. Additionally, whenever someone clicks on a link which still has your old domain, because your server has a 302, it will automatically redirect them to your new domain name.

Wait a few months for your new domain name to “age” in Google. Aging is very important, and it usually takes 2 to 6 months, at the very least.

When your new site has aged satisfactorily, change your 302 redirects to a 301. This will transfer the page ranking of your old site to your new one in Google.

How to make the redirection

The most robust way of doing the redirection is thru .htaccess.

  1. Create a text file called .htaccess in your local PC.
  2. Put the following in this text file:


    Redirect 302 / http://www.newdomain.com/

    Replace www.newdomain.com with your new domain name.

  3. Save your text file.
  4. Upload this file in your old domain name’s public_html.

If you only want to redirect users to another directory, try this more convenient method thru PHP:

  1. Create a file with the same filename as your old web page file (index.php, default.php, etc.)
  2. Enter the following lines:


    <?

    header("Status: 301 Found");
    header("Location: main");
    ?>

  3. Upload this file in your directory.

Backing up your website using bash

Note: Thank you to Bombim Cadiz, Linux guru extraordinaire, who could always explain in a few words what pages and pages of websites could not.

If you do frequent backups of your website, especially a Linux-based one at that, I’m sure you also have your share of:

  • Typing the same tar and mysql commands over and over again,
  • Opening all your config files to look for your database usernames and passwords, and
  • Basically going crazy over the numerous command switches & options.

When doing repetitive tasks such as backups, it makes more sense to use something called bash.

Bash stands for Bourne-again shell. It is very much like DOS’s batch file — it allows you to save a set of commands in a single file. This means that in you only need to run this one file, and all the commands you placed there will be executed.

A basic backup bash

1. Create the bash file in your favorite text editor.

Here is a simple bash file:


#!/bin/bash
echo "Let's back up your public_html directory!"
tar -cvzf backup.tar.gz public_html/*
echo "Your directory has been backed up. You may now download the file backup.tar.gz."

2. Save the text file. The filename that we are going to use is "backup." I removed the file extension .txt in order to make it easier to run the bash file.

3. Upload the file to your server, preferably in a directory that cannot be accessed by the public.

4. Make the file executable. You can do this via FTP by right clicking on the file, then changing the file attributes to 755.

Or if you’re logged in to your shell via SSH, just enter the following commands:

chmod +x file.sh

5. Whenever you need to backup your site, all you have to do is login to your shell, and run the bash file, like so:

./backup

Spicing it up

Here’s a modified backup bash for the adventurous in you:

#!/bin/bash
# Change the variables below, depending on your project.
projectname=MYPROJECT # Name of project
dbuser=myname # Database username
dbpass=mypassword # Database password
dbname=mydatabase # Database name
htmdir=public_html # Where your HTM files are located
backupdir=public_html/backups # Where you save your backup files
# Pause function
Pause()
{
echo
echo -n "Press ENTER to continue."
read
echo
}
# Welcome message
echo "Hi! This will backup the HTM and DB of this website. Simply follow the instructions."
Pause
# Ask for suffix of filename
echo "A suffix is appended to the filenames of the backup files."
echo "This is usually in the form of YYYY-MM-DD-TTTT (TTTT is the 24-hour format time)."
echo "For example: 2006-01-01-1200"
echo
echo "Enter your desired suffix now: "
read suffix
Pause
# Delete backup files
echo "Deleting existing backup files"
rm $backupdir/*
echo
echo "Backup files deleted."
Pause
# Tar HTM and DB
echo "Backing up HTM & DB files"
tar -cvzf $projectname-HTM-$suffix.tar.gz $htmdir/*
mysqldump --opt -Q -u $dbuser -p$dbpass $dbname > dump.sql
tar -cvzf $projectname-DB-$suffix.tar.gz dump.sql
rm dump.sql
echo
echo "All HTM and DB files tarred and gzipped."
Pause
# Move files to backup directory
echo "Moving files to backup directory."
mv $projectname-HTM-$suffix.tar.gz $backupdir
mv $projectname-DB-$suffix.tar.gz $backupdir
echo
echo "Files moved to the backup directory."
echo
echo "Thank you."
echo "You can now download your files from the backup directory."
echo

Creating a favicon using Adobe Photoshop

A favicon, shortcut for Favorites Icon, adds a subtle touch of individuality to a website. It is a graphic which is typically displayed next to the website’s name in a browser’s bookmarks or address bar.

Most favicons have a dimension of 16 x 16 pixels, and use the .ico file format. Some newer browsers, however, already support .gif and .png.

  1. Download the ICO plugin for Adobe Photoshop at the Telegraphics website. To install, extract the file to your Photoshop’s file format folder. This is typically located at C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats

    Take note that you can use other tools to create favicons. I also use Microangelo and IrfanView. I have a personal preference in the Photoshop-plugin technique because of its flexibility.

  2. Using your favorite graphics program (such as Adobe Photoshop or Macromedia Fireworks), create a new canvas. It is recommended that you use a canvas size with a multiple of 16, such as 64 x 64 pixels.
  3. Create your graphic. Keep it simple, and don’t apply too much anti-aliasing.
  4. (Continued)

  5. Resize your graphic to 16 x 16 pixels. If you are using Adobe Photoshop, navigate to Image > Image Size, and enter 16 pixels in Width and Height. Next, to minimize blurring, select Bicubic Sharper from the drop down. Click OK.

    If the graphic looks blurry, experiment with the aliasing and the sharpening filters.

  6. It’s now time to convert your image to the .ico format. If you created your file in another graphics program, load it now in Photoshop. From the menu, go to File > Save As. The Save As dialog box will appear. Under Format, select ICO (Windows Icon) from the dropdown. In File name, enter favicon. Click Save.

  7. Upload the favicon.ico file in your web directory.
  8. In the web pages that you want your favicon to appear, include the following code between the <head> tags:
    <link rel="shortcut icon" href="/main/images/favicon.ico" />

    Make sure that you enter the correct path to your favicon in the code. For example, for this website, the following code was used:

    <link rel="shortcut icon" href="/main/images/favicon.ico" />

Backing up your website

Not long ago, I interviewed approximately twenty website administrators who were in charge of the management and administration of at least two websites. One of the questions I raised was how often they backup their website.

The results:

  • Daily — 1
  • Weekly — 3
  • When I am reminded to do so — 10
  • Never — 6

Hopefully, the results are not representative of the web development community because, oh boy, are we gonna be in trouble :)

Why backup

Backup is something we website administrators take for granted — maybe because we are blessed with reliable web hosting companies, or maybe because the content is not updated regularly that it seems like a waste of time.

But there are reasons why you should keep your own separate backup:

  • A lot of webhosting companies do not restore backups for free. One of my web hosting accounts actually charged $25 when we requested a backup restoration.
  • Mistakes and accidents happen. Even if your web hosting company perform daily backups, there is still a possibility that they won’t back it up at least once. And, depending on your luck, it may happen at the same time that you accidentally delete a file.
  • One word: Hacking. You are particularly susceptible if you are using very popular open-source scripts, particularly bulletin board systems.
  • If your site has a forum or has a lot of user-submitted content, your website data actually becomes more crucial. Not only because your website has a greater amount of content, it also has a greater amount of server load.
  • If you have a full backup of the site in handy, it is very convenient to give a copy to your client when they need it.
  • Some hosting companies, despite their claims, actually do not have a regular backup system in place.
  • Web hosting companies do close down. And when they do, so do any other means of getting in touch with them.

When to backup

How often you should perform a backup will depend on a number of factors:

  • Availability of the resources you need in order to perform the backup operation;
  • Frequency of content updates in your website;
  • Amount of updates; and
  • Importance of the website to the organization.

What to backup up

For most cases, there are two things that need to be backed up:

  1. Database. If you are using one of the popular open source content management systems (CMS) to maintain your website, there is a great possibility that your content is saved on a database.
  2. Web files. These are the files accessed by your users (PHP, HTM, images, etc.), and are usually saved in a directory called public_html or www. Note: If your website writes or reads files in another directory, whether remote or above the public_html directory, then these should be backed up too.

Backing it up

In a nutshell: The easiest way to backup your site is by compressing all your HTML/PHP/etc. files, and then downloading the compressed files. Here’s how to do it:

Step 1: Get shell access to your account. If you don’t have one, ask your web hosting provider nicely :) For security reasons, this is usually disabled by default.

A shell allows you to access your server thru a command-line interface (think DOS). With shell access, you can FTP, debug CGI scripts, set permissions, and even read your email.

If your web hosting provider refuses to grant you an SSH/Telnet access, you have no choice but to download each of your file via FTP, which is a time-consuming process.

Step 2: Get a Telnet/SSH client. I personally use PuTTY, a free telnet/SSH client.

Step 3: Login to your account. Open PuTTY (or your favorite SSH/Telnet client). Under Host Name, enter your domain name or IP address. Under Protocol, it is highly recommended that you select SSH instead of Telnet. Click the Open button at the bottom of the window to connect to your server.

You will be asked to enter your account’s username and password. If your login is successful, you will be taken to the prompt, which is typically represented by a dollar sign ($)

Step 4: Backup your database. Enter the following commands:


mysqldump --opt -Q -u USERNAME -pPASSWORD DATABASENAME > BACKUPNAME.sql

Replace USERNAME with the username of your database, replace PASSWORD with the password of your database, replace DATABASENAME with the name of your database, and replace BACKUPNAME with the desired filename of your backup.

When completed, you will be taken back to the prompt. Verify that the BACKUPNAME.sql is in the path you specified. You can compress this file by following similar commands at the next step.

Step 5: Backup your web files.

Go to the directory that you want to backup.

To view the contents of a directoty, enter the following commands:

ls

To change directories, just enter the following:

cd DIRECTORYNAME

Replace DIRECTORYNAME with the desired directory name, For example:

cd public_html

And finally, to compress/archive all the files and subdirectories in that directory, enter the following commands:

tar -cvzf FILENAME.tar.gz *

Replace FILENAME with the desired filename of your backup. Verify that the backup was successfully created. You can do an ls, or view your directory using your FTP client.

Step 5: Download the backup files. Use your favorite download manager. I personally use ReGet and GetRight.

Pretty nifty, huh? Hope this helps.

What web hosting company would you recommend?

The safe answer is always: "It depends on your needs."

It’s a tricky business recommending a web host, and I’m unfortunate enough to be asked that question frequently. I even have a ready script in hand, presenting 3 to 5 options to a client depending on their requirements, complete with a comparison chart, and a table of pros and cons.

There are instances when giving a hosting recommendation is not as risky, and in these instances, I won’t hesitate to mention the sites which come to mind everytime the subject of hosting comes up: I would personally recommend Site5 for Linux, and maybe Intermedia for Windows (not Linux). I know a lot of WiseWomen who swear by Pair. My brother is currently hosted on a Philippine-based webhosting company called Site.com.ph Digital Interactive, and is very happy with it.

I admit we host a lot of commercial websites in Intermedia. Some of our clients prefer LiveStats for viewing their website’s statistics, and their sleek DeskPilot for checking their emails from the web.

However, with big hosting companies, the impersonal attitude of the support personnel can be very off-putting, sometimes bordering on rudeness. For instance, I remember requesting SSH access for one of our accounts hosted in Intermedia. After filling in a request and providing them with the required information, the support personnel curtly replied that he cannot grant us SSH access on the reasons we provided. Period. (Ironically, they have previously granted us SSH access on our other accounts. Their client base must be so big as to bypass that information.)

Also, I’ve learned to be wary of hidden costs — in restoring from a previous backup, fixing a corrupted table in your database, DNS configurations, in upgrading/downgrading hosting plans, etc.

Thank goodness for hosting companies such as Site5. My feelings toward Site5 are very strong, and a bit personal. Back in 1999, when I was probably The Ultimate Newbie in their entire customer base, people like Matt and Todd were already there, patiently answering my questions — from Perl paths, to tips on backing up my database and DNS configurations.

I wasn’t actually the easiest (or smartest) customer in the world, but I have yet to encounter an email where they would refuse to give me any support because it was "beyond their scope of responsibility." In the rare case that I did ask a far-fetched question, they have always pointed me to the right direction, and even went as far as give URLs and tips on how to do things efficiently.

Fast forward to 2004, where thankfully, I don’t bug them as often:

  • I have finally gone past that newbie stage (even if, at times, I still feel like one)
  • Their NetAdmin leaves little room for questions
  • They practically have all the features I need. Do a comparison with other virtual hosting companies to see what I mean.
  • Most of all, they don’t forget their old customers. Did they implement a new pricing scheme that is better than what I originally got? No problem, here’s an additional 750MB space. I’m a little tight on cash this month, can I downgrade my plan first? No problem, consider it done.

Their slogan claims that they’re the most trusted name in hosting, and in my book, there is no doubt.

Check out their website at www.site5.com.