Introduction to Templates
One of the prominent features of TypeTote is flexibility when it comes to building templates. Our goal was to provide a system that makes it radically easy to implement a design with relative ease. We highly suggest taking a look at our underlying theme Tundra (_themes/tundra).
How a theme is rendered:
Templates in TypeTote read the data layer via the $page_data array generated by the logic found in modules and extensions. An excellent example of this would be how an entity is rendered by reviewing the code found around line 28 in _modules/core/core.module.php.
Looking over this file, after TypeTote runs the route check, you can see the $page_data array is built by the loadEntity method. If you were to print this, it would output a data array with all the info you need for the page. Once the data array is built, we then need to declare a template type, an identifier to help TypeTote render the correct markup. There are two template types you can declare:
- Content = used for rendering entities and displaying content (blog posts, pages, e.g.)
- List = used for rendering a list of content such as a listing of posts (such as those found in our user-guide, search results, tags).
Looking at line 41 of the core module, you will see that we are rendering a content page. While on 92, we are rendering a list.
Finally, we declare the theme we are passing this data into. Looking at line 55 of the core module, we are passing the $page_data with the content template type to the main front theme as we are rendering a content page. If you were to look at the admin module, you can see we pass the data to the admin theme.
Working with the Template Data:
Once the data passes to the template, this is where the front end development begins. A basic template needs to have the following files and directories to help TypeTote render the theme.
- page.tpl.php in a directory called templates
- style.css in a directory called css
- script.js in a directory called js
While style.css and script.js are pretty self-explanatory, the one file we want to discuss in more depth is the page.tpl.php file.
This is the core file where you can add your HTML markup to render your site's design and structure. To help with some of the essential elements, we have a series of render functions that TypeTote uses to help you render basic markup. Looking at the Tundra theme, you can see these render functions in action and individually cane be found in _modules/core/core.hooks.php.
- render_templateList() - creates a list markup primarily found on content index pages such as our user guide
- render_templateContent() - renders basic page content (this page)
- render_templateMetaHead() - used to render page meta information found in the tag of the page
- render_themeJS - loads the theme script file
- render_themeCSS - loads the theme css file
- render_siteMenu - outputs the site menu on the page
- render_block($machine_name) - outputs the entity block where machine_name would be the block name
- render_siteBanner() - outputs the site banner
- renderTags() - renders the page tags
- render_siteTitle () - renders the site title, page title, and slogan
- render_siteDescription - renders the site description used for the meta description tag.
While there is nothing that requires you to use any of these hooks, we highly recommend them since they have pre-built logic that deals with cases where values may not be set.
Finally, as you may have noticed in the core module code, TypeTote allows you to create template overrides. Such as to create a custom homepage, you need to create a file called page—front.tpl.php in your template folder. Explore the core module file for the naming conventions about custom blog listing pages, and post pages and pages.
With this understanding, we highly suggest you go over the Tundra theme and know what you find.