Let's kick off our Warp6 blog post series in which we take a closer look at the overall framework structure and how everything fits together. This first post shows the basic file concept of the Warp theme framework and how to use it. If you don't know Warp6 yet take a look at the announcement. Okay, let's start!
To provide as much flexibility as possible we implemented a special file cascade into Warp. If you include any file like CSS, JS or template PHP files Warp6 looks successively in specific folder for the files and the first file found will be loaded. Here is the cascade:
- theme folder
- specific system folder, for example warp/systems/joomla.1.6
- warp framework folder
This gives you full flexibility to override any important theme related file. In the following we will give a short overview about the most important files if you want to customize a Warp6 theme.
The main template file
/layouts/template.php is the heart of every theme, it provides the complete HTML markup for the base theme layout. This is different from standard Joomla templates or WordPress themes where the
index.php is the main template file. Second important file is the
Modules or widgets can be displayed in different styles with additional icons and badges. The
/layouts/module.php takes care of displaying all these module variations. Depending on the selected style the
module.php loads the right HTML markup from predefined module templates. Further the framework comes with three commonly used module layouts equal, double and stacked, which are used to position modules next or above each other. It's also possible to extend them with your own custom module templates and layouts.
The CSS files are divided in three different layers and are placed in their respective folders for theme specific
/css, system depended
/warp/systems/joomla.1.6/css and framework styles
/warp/css. Including these files is really easy because Warp6 also uses its file helper to locate them across the different folders. All CSS files are modular and well structured with the name of each file naming its purpose. We will do a dedicated blog post about the CSS framework soon.
/js, system depended
/warp/systems/joomla.1.6/js and framework scripts
/warp/js. All scripts are configured in a single file
/js/template.js. This file is used to enable or disable effects which will be loaded with the theme.
Every system has a set of layouts which defines the HTML markup for the core CMS output. For Joomla these are typically the HTML overrides that are used by the theme to render the content component or modules like the login or search. The Joomla 1.6 files are located in
warp/systems/joomla.1.6/layouts. In Wordpress the layouts provide a HTML markup for the different pages like blog frontpage, the archive or a single post. The Wordpress files are located in
warp/systems/wordpress.3.0/layouts. To keep things simple, Warp6 basically uses the same HTML output for all supported systems. Regardless of what you are viewing, articles of a category in Joomla's content component or posts from a category in Wordpress, Warp renders the HTML. This allows to create universal CSS rules which apply for both CMS platforms.
This overview shows the key concepts of Warp6 like the layers and the cascade and how the files and folders are structured. As you can see Warp6 is a modular, flexible and extendible theme framework that provides a rich toolset for developing Joomla 1.5/1.6 templates and Wordpress 3.x themes. It's up to the developer what features he uses. Only select those tools that you are actually needing. In our next blog post we will talk about the "Styles" feature another addition to Warp6. Stay tuned!