Crear un archivo index básico
From Joomla! Documentation
El archivo index.php se convierte en el núcleo de cada página que Joomla! entrega. Esencialmente, haces una página (como cualquier página HTML), pero colocas código PHP donde debe ir el contenido de tu sitio. La plantilla funciona mediante la adición de código de Joomla! en las posiciones de los módulos y la sección del componente, de la plantilla. Cualquier cosa añadida a la plantilla aparecerá en todas las páginas, a menos que se agregue a una de estas secciones a través del CMS Joomla! (o código personalizado).
Esta página mostrará un escueto código, listo para cortar y pegar, en tu propio diseño.
Comenzar
Una plantilla de Joomla!, comienza con las siguientes líneas:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >La primera línea detiene gente "traviesa" que busca en tu codificación y quiere hacer cosas malas.
La segunda línea es la Declaración de Tipo de Documento (DOCTYPE), que indica al navegador (y araña web) que gustos de página HTML estás usando. El doctype utiliza HTML5, que es una nueva versión de HTML, que es en gran medida compatible con versiones anteriores, pero contiene muchas características nuevas. Debes ser consciente de que esto no va a funcionar bien en Internet Explorer 8 o versiones anteriores sin un hack. Es posible que desees investigar esta situación y los deseos de tus clientes antes de decidir qué tipo de documento deseas utilizar. Sin embargo, esto es utilizado en Joomla! 
y superior.
En la tercera línea comienza nuestro documento HTML y se describe el lenguaje de la web. Un documento html se divide en dos partes, el encabezado y el cuerpo. El encabezado contendrá la información sobre el documento y el cuerpo va a contener el código del sitio web que controla el diseño.
Encabezado
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>La primera línea la usa Joomla! para poner la información correcta del encabezado. Esto incluye el título de la página, la información meta, así como la del sistema JavaScript.
El resto crea enlaces a dos hojas de estilo del sistema y a tu propia hoja de estilo (si se denomina plantilla.css y se encuentra en la carpeta css del directorio de tu plantilla. Así que si su plantilla está en http://www.misitio.com/templates/mi_plantilla/ entonces los archivos css irán en http://www.misitio.com/templates/mi_plantilla/css/).
Sección del Cuerpo
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>Sorprendentemente, esto será suficiente! Sí, es un diseño muy básico, pero va a hacer el trabajo. Todo lo demás será realizado por Joomla!. Estas líneas, que generalmente se llaman declaraciones jdoc, le dicen a Joomla! como incluir la salida de ciertas partes del sistema Joomla!. Nota: tendrás que asegurarte que tu menú entra en la posición "top" del módulo.
Posiciones de los Módulos
Por encima, la línea que dice: name="top" añade una posición de módulo llamada top y permite a Joomla! colocar módulos en esta sección de la plantilla. La línea type="component" contiene todos los artículos y contenido principal (en realidad, el componente) y es muy importante. Va en el centro de la plantilla.
Nota: Puedes agregar tus propias líneas de módulos en cualquier lugar que desee en el cuerpo, pero hay que añadir una línea correspondiente al archivo templateDetails.xml que se encuentra junto al index.php de la plantilla.
Final
Esto es todo - una última palabra:
</html>Imágenes Personalizadas
Si deseas agregar cualquier imagen a la plantilla, puedes hacerlo de esta manera:
<img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/myimage.png" alt="Custom image" class="customImage" />Aquí, la variable template se llenará en el nombre de la plantilla.
CSS Personalizado
Puedes agregar un CSS personalizado, de esta forma:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/styles.css" type="text/css" />Cada archivo que se agregue debe tener una línea en el archivo templateDetails.xml de la plantilla, a menos que resida en una subcarpeta (que puede ser incluida en un elemento <folder>).