Theme and page generation process

Your web pages on your Wild Apricot site are generated on the fly using your site's theme together with any theme overrides. The actual process by which each site page is generated is as follows.

1. Theme assembly

The theme will be assembled as follows:

1. System reads config file of currently selected theme (MainConfig.cfg).
2. If there is a <ParentId> option set, it reads config file of parent theme. The process repeats until system encounters parentless theme (the root theme).
3. All files from root theme are copied to special assembly folder.
4. All files from child themes are copied to the same folder, overwriting parent files.
5. Files from Theme_overrides folder are copied to the same folder.

2. Gadget assembly

1. Gadgets and controls are copied to theme directory under Gadgets and Controls folders accordingly.
2. Files from Theme_overrides folders are copied to the same folders.

3. CSS and JavaScript parsing

1. Style sheets and JavaScripts are loaded from Head.tpl, included in MainTemplate.tpl.

4. StringTemplate page parsing

1. System reads MainTemplate.tpl file located in the root of assembled theme. This file is an entry point for theme rendering.
2. System parses MainTemplate.tpl, replacing all <$...$> constructions with their values.
3. If the system finds a <$templateName()$> construction, it opens templateName.tpl file, parses it with StringTemplate engine and adds its content to resulting HTML.
4. <$LAYOUT$> construction is replaced it with master layout file, currently located in Layouts/LayoutsTemplate.tpl and is parsed.
5. <$Gadget name="gadgetName"$> tags are replaced with corresponding gadgets code and parsed. Entry point for every gadget is GadgetTemplate.tpl file.
6. <$CONTENT$> tag is replaced with content of current page from the page content database.

The page is now complete and is sent to the browser to be displayed.

Theme inheritance

Inheritance allows you to pass attributes from one template to another child template. Let's imagine the following situation:

We have a theme Theme1 which has no parents (e.g,. it is standalone theme).
Here's an example of key theme files structure:

/Theme1/
/Theme1/MainConfig.cfg
/Theme1/MainTemplate.tpl
/Theme1/Layouts/LayoutsTemplate.tpl

Now, let's say we have Theme2 theme, and its parent is Theme1 theme. We set the theme's parent in theme config file.
It's file structure would look like this:

/Theme2/
/Theme2/MainConfig.cfg

When theme builder builds your theme, first it loads all the files from your parent theme and then it loads all the files from your theme. The files from your theme will overwrite any files with the same name in the parent theme. The final result is an assembled theme and consists of all files from parent theme overwritten by sibling themes. In our example, here's full assembled file structure of Theme2 theme:

/Theme2/
/Theme2/MainConfig.cfg (file from *Theme2*, overrides *Theme1* file with the same name)
/Theme2/MainTemplate.tpl (taken from *Theme1* theme)
/Theme2/Layouts/LayoutsTemplate.tpl (also taken from *Theme1* theme)

You can go even further and create third level of inheritance.