Create new template - Part 3 - Layout of template

In this post, we will find out how to create layout template supposed to apply for all web pages. The simple template should include header, main content and footer.

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(); ?>

render('_footer.phtml'); ?>

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.