Template System Building
There are multiple ways to build your own template system. We'll go through a couple of them here.
Method 1: Using custom HTML files
- Create an HTML/PHP file in your favourite editor - this is your design template
- Within this file, wherever you want dynamic content simply type echo $variable_name or print $variable_name
- Upload this file to your content/html directory - it needs to have an .html or .php suffix
- Upload any associated images to the content/image directory (check your paths or use an absolute URL)
- Create a corresponding new page in your Vanilla CMS admin area - this will reference your template
- Enter any extra dynamic data such as page tags, and META
- Tick the box that says 'Use a custom HTML file for this page'
- Enter the name of the template file that you uploaded in the accompanying field
- Tick the box that says 'Allow access to variables'
- Save your page and you're all done!
Now whenever you want a page to use this template, you simply follow steps 5 to 10 above. The PHP variables within your template file will now display the content that was entered into the WYSIWYG editor and other page fields.
All page and site variables are accessed via $object->syntax (as opposed to array).
List of Available Page Variables
$page_data->pID$page_data->parentID$page_data->title$page_data->friendly_title$page_data->description$page_data->meta_description$page_data->meta_keywords$page_data->content$page_data->isphp$page_data->tags
$page_data->allow_variable_access$page_data->use_custom_header$page_data->custom_header_image$page_data->use_custom_css$page_data->custom_css_file$page_data->use_custom_html$page_data->custom_html_file$page_data->menu_item$page_data->menu_order$page_data->menu_only$page_data->menu_url$page_data->show_tags$page_data->show_date$page_data->show_toplink$page_data->show_toc$page_data->news_layout$page_data->allow_smart_tags$page_data->lightbox_images$page_data->rss_item$page_data->page_order$page_data->edit_role$page_data->page_pass$page_data->aID
$page_data->unlink_breadcrumb$page_data->last_updated$page_data->creation_date$page_data->hidden$page_data->active
List of Available Site Variables
There are actually more than this, but these are the most useful ones:
$config_site_title$config_site_strapline$config_site_email$config_site_url$config_default_meta_description$config_default_meta_keywords$config_content_folder$config_homepage_id$config_site_footer$config_logo_position$config_page_not_found_id$config_css_file$config_rss_location$config_maintenance_on$config_maintenance_message$config_google_verification$config_show_accessibility$config_show_breadcrumbs$config_navigation_css$config_header_image_type$config_navigation_css$config_jquery_core_public$config_show_print_options
To include custom CSS in your external HTML files, you must specify the location within the template file itself - you can achieve this by adding and passing through the $page_data->custom_css_file variable.
Method 2: Using Smart Tags
You can read more about smart tags here. Essentially, you use variable placeholders within your page which are replaced with predefined data at runtime.
Method 3: Using PHP
There aren't really any particular steps to follow here as you could essentially 'drop-in' any kind of ready-made template system using Vanilla's ability to embed raw PHP code. Such a system could either be implemented at page level - i.e., templates that effect the whole page, or at a content level, which would only format the body of content that is entered using the WYSIWYG interface. We've included a few of the latter type already - examples can be seen under Features > Layout and Style > Content Templates.
These off-the-shelf content templates are written in XML and can be built to integrate seamlessly with the WYSIWYG toolbar.
