Parent and child design themes — Webasyst documentation

Website sections powered by different apps use separate design themes, because each theme belongs to its app. For example, on Site app’s and on Blog app’s pages separate themes are used.

Pages displayed within various website sections can have different or common appearance. The latter is usually achieved by one of these methods:

Copy code from one design theme to another. This is very easy to implement at the very beginning, but it becomes hard to follow it when you release updates to a design theme and have to copy changed portions of code from theme to theme again and again.
Store common design code in one theme and include it in other themes when necessary. This method will help you avoid too much work and mistakes while copying design theme code. You only have to mark files which must be stored in the main, parent, theme and how other, child, themes can use them.

Differences between parent and child themes

A parent theme does not use other themes’ files and is completely independent. Parent themes are most simple by structure.

A child theme can use some files of its parent theme. For example, CSS styles or common templates such as header, sidebars, footer, etc.

A child’s theme.xml file contains the following:

Attribute parent_theme_id of theme element, containing the ID of the parent theme in app_id:theme_id format.

Example for a Photos app theme, which is a child to a Site app’s theme:
```
<theme id="mytheme" vendor="123456" author="ThemeDeveloper" app="photos" parent_theme_id="site:mytheme" version="1.0.0">
```
(optional) Attribute parent="1" for the files which must be included from the parent theme.

Example for file index.html, which is contained only in the parent theme and is used by child themes:
```
<file path="index.html" parent="1">
</file>
```
Such files are available for editing in the design editors of both apps: that of the parent theme and the child theme.

These are the only differences that exist between parent and child themes.

Smarty variables for including design theme files

Various files of the parent and child themes can be included in HTML tempates using variables. Variables can be used only HTML templates, their values are not available in files of other types.

If a design theme has been reset to its original state, then the variables listed below refer to directory wa-apps/[app_id]/themes/[theme_id]/ or its URL.

If a user has saved theme settings or a theme was uploaded via backend as an archive file, then variables refer to directory wa-data/public/apps/[app_id]/themes/[theme_id]/ or its URL.

Including JavaScript, CSS, and font files

These variables contain URL of theme directories; therefore, they can be used to include only files directly available in a browser; e.g., CSS- or JavaScript files.

$wa_theme_url

Relative URL of the directory of the design theme to which current HTML file belongs. If CDN is enabled, then the variable contains the absolute URL of the directory’s CDN copy.

If a child theme includes an HTML file of the parent theme using attribute parent="1", then the variable in that file contains the URL of the parent theme directory.

In child theme’s own files the variable contains the URL of the child theme directory.

In parent theme files, the variable contains the URL of the parent theme directory.

Example

<link href="{$wa_theme_url}extra.css" rel="stylesheet" type="text/css">

$wa_real_theme_url

Relative URL of the directory of the design theme to which current HTML file belongs, like $wa_theme_url. Always contains a URL relative to the domain on which Webasyst is installed regardless of the CDN setting status.

Example

<link href="{$wa_real_theme_url}extra.css" rel="stylesheet" type="text/css">

$wa_active_theme_url

Relative URL of the directory of the design theme which includes current HTML file on a website page.

If a child theme includes an HTML file of the parent theme using attribute parent="1", then the variable in that file contains the URL of the design theme of the current website page’s settlement: either that of the parent or of a child theme.

In child theme’s own files the variable contains the URL of the child theme directory.

In parent theme files, the variable contains the URL of the parent theme directory.

Example

<link href="{$wa_active_theme_url}extra.css" rel="stylesheet" type="text/css">

$wa_parent_theme_url

Relative URL of the parent theme directory.

This variable makes sense only in HTML files of a child theme to include parent theme files.

Example

<link href="{$wa_parent_theme_url}mytheme.css" rel="stylesheet" type="text/css">

Including HTML files

$wa_active_theme_path

Full path to the design theme directory using current HTML file on a website page.

If current HTML file belongs to a parent theme and is included into its child theme using attribute parent="1", then the variable in that file contains the path to the directory of the current website page settlement’s design theme: either the parent or the child one.

Example

{include file="`$wa_active_theme_path`/sidebar.html"}

$wa_parent_theme_path

Full path to the parent theme directory.

Use of this variable makes sense only in HTML files of a child theme to include parent theme files.

Example

{include file="`$wa_parent_theme_path`/home.html"}