The layout of templates are defined in layouts directory. Lets create this directory in app/templates/sample directory.Our template consist of three parts: header, footer and content as follow:
caption
Look back to the layouts directory of default template (app/templates/default/layouts), you'll see four layout files:
TomatoCMS_Root_Dir
|___app
|___templates
|___default
|___layouts
|___admin.phtml
|___auth.phtml
|___default.phtml
|___install.phtml
As these layout names, four files was used to define the layout for
- Administrator pages (admin.phtml)
- Authenticate pages (login, logout) (auth.phtml)
- Default pages, i.e front-end section (default.phtml)
- Install Wizard (install.phtml)
So, in sample template, we also have to create these layouts.
For purpose of this post, I create file default.phtml which defines layout for all front-end pages.
Below is content of app/templates/sample/layout/default.phtml:
headMeta(); ?>
headTitle(); ?>
headScript(); ?>
headLink(); ?>
render('_header.phtml'); ?>
layoutLoader(); ?>
Let me explain some lines:
- TomatoCMS use 960 Grid System framework to layout pages, hence I add style sheets defined by the framework:
- The next line defines the skin used for the layout:
- Next lines defines JavaScript used by TomatoCMS, don't change it:
- Next line allows us to set the title, add link to other style sheets, javascript libraries or even add meta keyword for pages:
headMeta(); ?>
headTitle(); ?>
headScript(); ?>
headLink(); ?>
These functions was defined by Zend Framework. Don't worry about them, lets add these line to ensure our front-end work correctly.
- Final line of head section define the base URL if you want to load widgets by Ajax. Don't worry about it, leave it as default template:
Also, I want you to notice about APP_STATIC_SERVER, APP_TEMPLATE, APP_SKIN, APP_URL constants. These constant was loaded by TomatoCMS and its values are defined in application configuration file (app/config/app.ini):
...
[web]
url = "http://localhost/tomatocms/index.php" ==> APP_URL (Base URL of your site)
static_server = "http://localhost/tomatocms" ==> APP_STATIC_SERVER (The URL that contain all static resources as CSS, JS)
template = "sample" ==> APP_TEMPLATE (Template name)
skin = "plus" ==> APP_SKIN (Skin name)
...
That's all details about head section.
Next is body section of layout.
As I said earlier, our pages will contain 3 parts which are header, footer and content. The header and footer sections should be used by all pages, so I use:
render('_header.phtml'); ?>
and:
render('_footer.phtml'); ?>
to render the content of header and footer, respectively.
Off course, we have to create _header.phtml and _footer.phtml files in layouts directory first.
// app/templates/sample/layouts/_header.phtml
Header
and:
// app/templates/sample/layouts/_footer.phtml
Footer
The main content will be loaded by:
layoutLoader(); ?>
You don't have to know details about it, just leave it as default template. TomatoCMS uses it to load layout and content of pages.
Now, go to http://localhost/ to see what happens.
Hey, I only see the blank page. Don't worry, this is because we have not created the XML files which define layout of pages.
Let's read next post to resolve this problem.
