Topics

Theme Template Structure

Overview
This guide will show how to set up a theme in Exponent CMS 2.0. It covers how to best interact with the system, and make the most out of your Exponent project.

Parts and Pieces
An Exponent website ban be broken down in to two major components: themes and views. Themes (also known as Theme Variations and Subthemes) comprise the overall structural framework (HTML and CSS defining columns, header, foot, etc..), of the website, while views (smarty templates) display a particular module’s content (news, text, blog, etc..). The theme file itself, located in /themes/mynewtheme/index.php, intermingles HTML with some Exponent specific PHP functions to form the base for your website's theme.

Themes and Subthemes
Theme files are the shell if your site. Comprised of mostly HTML, they require the use of three (3) php function calls, with an optional fourth. The main idea is to give a theme designer complete control over their layout, only plugging into CMS functionality where needed. The four (4) functions (class methods of expTheme) are:

  • expTheme::head(); // required
  • expTheme::main(); // required
  • expTheme::module(); // optional
  • expTheme::foot(); // required
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<?php
    expTheme::head(array(
     "xhtml"=>true,
     "css_primer"=>array(YUI3_PATH."cssreset/reset-min.css",
                         YUI3_PATH."cssfonts/fonts-min.css",
                         YUI3_PATH."cssgrids/grids-min.css"),
     "css_core"=>array("common"),
     "css_links"=>true,
     "css_theme"=>true
     )
    );
?>

</head>
<body>
    <?php
    expTheme::main();
    ?>
   
    <?php
    expTheme::foot();
    ?>
</body>
</html>

expTheme:head(array);
This required function in the theme takes an array with 5 required keys, 4 of which pertain to the CSS portion Exponent’s Theming Engine.

expTheme::head(array(
"xhtml"=>false,
"css_primer"=>array(
         YUI3_PATH."cssreset/reset.css",
         YUI3_PATH."cssfonts/fonts.css"),
     "css_core"=>array("common"),
     "css_links"=>true,
     "css_theme"=>true
    )
);
?>

expTheme::main();
A simple update of the current exponent_theme_main() syntax, bringing it to current static class method usage found throughout exp2. It’s the meet and potatoes of Exponent functionality, acting as a sectional container, along with displaying the content of a module's actions.

expTheme::module(array);
A unified way to hard-code modules. expTheme::module() allows for hard coding both old-school modules, and new exp2 controllers. expTheme::module() takes 1 parameter, an array, describing what module to hard code on the page.

// hard coding a controller
expTheme::module(array(
   "controller"=>"links", // the name of controller (exp2 mod) to display
   "action"=>"showall", // the action (class method) to run
   "view"=>"showall_quicklinks",  // the view to display in
   "source"=>"footer", // the source
   "scope"=>"footer",  // the scope, either sectional, top-sectional, or global by default
   "chrome"=>false // show or hide the chrome on this module (red chrome)
));
// hard coding an old school module
expTheme::module(array(
   "module"=>"container", // name of old school module without “module” tacked on
   "view"=>"Default",  // the view to display in
   "source"=>"@leftcol", // the source
   "scope"=>"top-sectional",  // display this container’s content on ever top-level page link
   "chrome"=>false // don’t show this modules chrome
));

expTheme::foot();
A simple update of the current exponent_theme_footerInfo() syntax, bringing it to current static class method usage found throughout exp2.

Loading Help