Joomla Custom Template Configuration

Templates in Joomla, are the same as themes in WordPress, they determine what your site will look like.  Will it have two or three columns, will it re-size for different screen resolutions, what colors will the site have, will it have any pictures; you get the idea.

One of the things that a developer ends up doing in Joomla is creating custom templates.  There certainly are many free and commercial templates available on the Internet.  Probably the fastest way to get the site developed is to grab a template that looks like what the client wants, and modify it, or use the Joomla included example templates and modify them.

No matter what approach you use, you end up having to modify the template, as you go deeper and deeper into the pages of the web site.  The client wants this screen to be a contact form, and the next screen to be a gallery of pictures.  Most of the time, you can just change the Joomla component, and you're all set, but there's always that one page where the client wants to remove the sidebar, or add another column.

Maybe I'm just a knucklehead, but I just go ahead and create the template from scratch.  There's something about doing your own templates, when your developing a site,  that makes you feel comfortable with everything on the site.  You know where everything is, how you did one thing, and how things hook up.  It takes a little more time, but it is a little more satisfying, then using another persons work.

Different templates can be assigned to different pages of your web site.  You could have a completely different web page, or custom template, for each page of your site if you desire, and it makes sense.

Let's get started.  A Joomla template is always in the templates directory in its own sub folder.  If you want your template to be called "Joanna", for example, then make a sub folder under the templates directory named joanna, like "templates/joanna"  Make all your file and folder names lowercase and one word to prevent problems when moving to a Linux server for example.

Next copy all the files and folders from the example beez template sub folder that comes with Joomla into your new "joanna" folder.  You can use any of the example templates, most folks use the beez.

Right now, if you open your Extensions->Template Manager in the  Joomla Admin panel, you'll find two beez templates, what's going on?  What happen to my "joanna" template.  Well, it's now time to get to work and start customizing.

The templateDetail.xml file

In a text editor open the templateDetails.xml in your "joanna" sub folder, and change the "name" tag from "beez" to "joanna."  You'll now find the template reads joanna in the Template Manager.  If you want your site to work properly, all your files and folders need to be in templateDetails.xml.  If you list a folder make sure you end it with a / and all the files under that folder will be included.

Next, every position in your web page has to be named as a position in your templateDetails file if you want to hook your Joomla content to the web page your creating.

The index.php file

Next the index.php file, this is the skeleton of your web page.  You need to include certain joomla tags in this file.  In the head section, put: "<jdoc:include type="head" />" which will include all the Joomla metadata on your web page.  In the main area of the page you need to have a component, and only one component is allowed per page.  The  component is included with: "<jdoc:include type="component" style="none" />."  Finally, any additional functionality you need like headers, menus, footers, and sidebars need a module position inserted in the index.php file like so: "<jdoc:include type="modules" name="footer" style="xhtml" />."  The name can be anything, but the module name must be the name that you place in a position tag in the templateDetails.xml file.

In the head of the index.php file you'll want to link to your css file which is usually "css/template.css."  This is where you style your site.

Alright, you've got the very basics of creating a Joomla custom template, now let's hook it to a web page on your Joomla site.  Menus determine what page will come up when you click on a menu, if you want a custom template to be displayed, you need to attach the template to the menu choice.

The Template Manager window

Go into the admin panel, then to Extensions>Template Manager.  You should see your custom template in the listing, if you edited your templateDetails.xml file correctly.

The Template Edit Window with the Menu Assigment

Click on your "joanna" template and the template edit window will come up.   Here you'll find a menu assignment section where you can hook your custom  template to one or more menu pages.  Save, and you're all set.

There's one gotcha, in the Template Manager window,  you'll see a yellow star by one of the templates.  This is your default template for the site.  All pages, except the custom pages you designate, use the default template.  You can change your default template by clicking on the radio button next to the template, and then clicking on the Default star on the top menu bar.

What sometimes happens is when your developing a custom template you make it the default template, so you can see your changes as you make them.  After you finish the template, you go to the Template Manager to assign it to a particular menu choice, and you'll discover the Template Edit screen has no menus to assign.  What happen?

The Template Edit window of the Default Template has no menu assignment

The answer to this gotcha, is to make another template the default template, and then go back to your custom template edit screen and you'll be able to assign the menu to your template.  The default template is by default assigned to all menu pages, and the custom template is the exception that you have to specifically assign a menu.

Comments are closed.