Template System Building
There are multiple ways to build your own template system. We'll go through a few 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_page_not_found_id
$config_site_footer$config_css_file$config_logo_position$config_nav_position$config_navigation_css$config_animate_navigation
$config_rss_location$config_maintenance_on$config_maintenance_message$config_google_verification$config_show_accessibility$config_show_breadcrumbs$config_show_descriptions$config_header_image_type
$config_jquery_core_public$config_show_print_options$config_enable_autosave$config_autosave_interval$config_external_link_icon$config_header_image_type$config_use_friendly_urls$config_attempt_friendly_links$config_friendly_deep$config_keep_log$config_use_search_highlight
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 (FCKEditor).
Method 4: Using FCKEditor Templates
Perhaps the simplest to use, there are a number of ready-made templates that come as part of the WYSIWYG system. We've included a few of these one-click templates already - examples can be seen under Features > Layout and Style > Content Templates.
These content-only templates are written in XML and integrate seamlessly with the WYSIWYG toolbar. To create your own, check out the existing format within your Vanilla installation files. It's a little tricky at first, but you can get the ball rolling by copying and modifying an existing one. More information about FCKEditor templates can be found here.
Method 5: Using the Theme Engine
The Theme Engine is a totally revamped approach to templating within Vanilla. It is essentially a true templating system whereby all of the site's design and style files are kept completely separate from the main script. You can read more about it here.