Interspire Website Publisher has a powerful template system that can be used to customize the look and feel of your website to suit your needs. All the server side PHP code has been separated from layout and HTML, so you only need to know HTML and CSS in order to create a stunning customisation.

It’s being used by web designers and website owners from all around the world to create amazing looking websites. In this guide you’ll learn how the template system works, what files you need to edit and how to modify the template files and CSS files to suit your needs.

The Template File Structure

Templates in Interspire Website Publisher are placed in the “templates” folder which is inside the Interspire Website Publisher folder. Here you will find a list of folders for all the available templates in your system. Inside each template folder is a list of files and folders that look like this:

  • Backup - This is where backups are automatically saved when you edit a template file from within the control panel
  • Images - Images for this template are stored here. You should save any images you wish to include in this folder.
  • Panels - All Panel files are located here. See below for an explanation on Panel files.
    • Snippets - Inside the Panels folder is a Snippets folder. All Snippets are located here. Snippets are explained further below.
  • Previews - The Image preview used inside the control panel for each template is stored in this folder.
  • Styles - The CSS files used inside the template are located here. Details on the different stylesheets found in this folder are below.

The HTML files in this folder are called Layout files. (Explanation below) Each HTML file corresponds to a different section of the website.

  • Articles.html - This layout file holds the layout of how Articles are displayed and is used when an Article is being read.
  • Authors.html - This is the layout file for the Author page and is used when viewing an authors details.
  • Blogs.html - This layout file corresponds to viewing a Blog entry.
  • Categories.html - When clicking on a category, this is the Layout file that’s displayed.
  • Default.html - This is the Home page layout file. It’s the Layout file used when firstvisiting an Interspire Website Publisher website. This is the first file you’d usually edit when starting your customization.
  • Error.html - This is the Layout file used when an error occurs on your website. You don’t need to customize this file.
  • Maintenance.html - This Layout file is used whenever you select the “Down for maintenance” option in your control panel. You don’t need to customize this file.
  • News.html - This is the Layout file that’s used when viewing a News item.
  • Other.html - This Layout file is used for the ‘Template Wrapping’ feature. See below for more information.
  • Pages.html - Whenever a “Web Page” is created in Interspire Website Publisher, it uses this Layout file.
  • PrintArticle.html - When a user clicks on “Print Article” this is the Layout file that’s used instead of Articles.html. Generally, this does not need to be customized unless you want the print version of the article to look different.

Layout, Panel and Snippet files.

Every file in the Interspire Website Publisher template system is a Layout file, a Panel file or a Snippet. The template system contains only HTML code and placeholders which identify another file to be included. A place holder starts and ends with %%. For example: %%Panel.PageHeader%%

  • Layout files: A Layout file generally contains the layout of the web page in question. It generally includes a number of Panel files. All Layout files are located in the root of the template folder. Some sample code from a Layout File would look like this:



%%Page.WindowTitle%%








	
	

		%%Panel.PageHeader%%
		

			

				
				%%GLOBAL_HomePageHeader%%
				%%Panel_RecentNewsPanel%%
				%%Panel.FeaturedArticlesPanel%%
				%%Panel.RecentArticlesPanel%%
				
				%%GLOBAL_HomePageFooter%%
			

			%%Panel.DefaultLeftColumnPanel%%
			%%Panel.DefaultRightColumnPanel%%
		

		
		%%Panel.PageFooter%%
  • Panel files: A Panel file generally indicates a Block or Section of the web page. (PageHeader for example) It generally includes other Panel files and Snippets. A panel file is included inside a Layout file or another Panel file by using the placeholder %%Panel.PanelName%% where PanelName is the name of the file located inside the “Panels” folder followed by .html. For example, %%Panel.PageHeader%% indicates that the file /iwp/templates/templatename/Panels/PageHeader.html will be loaded in place of that place holder.

	
%%GLOBAL_WebSiteName%%

	
	

		%%Panel_SiteMenuPanel%%
	

	

		%%Panel_SmallSearchPanel%%
  • Snippets: A Snippet is a recurring piece of HTML. It is used by the server side PHP code for recurring items such as a list. (eg. <li>Category Name</li>) A snippet can also include another snippet. Snippets are located inside the /templatename/Panels/Snippets folder and are included using the %%SNIPPET_SnippetName%% where SnippetName is the name of the file. For example, %%SNIPPET_MenuLinks%% indicates that the file /iwp/templates/templatename/Panels/Snippets/MenuLinks.html will be loaded.

	 %%GLOBAL_text%%

This diagram explains how Layout files, Panels and Snippets work together to create a web page in Interspire Website Publisher:

This is an example of a Layout file (default.html) loading a Panel (RecentNewsPanel.html) which in turn loads a snippet (NewsList.html) multiple times:

Place Holders

As we saw above, there are place holders that perform different functions. Panel place holders start with the word Panel and Snippets start with the word Snippet. There are other types of placeholders also:

  • Panel – Indicates a placeholder for a Panel file eg. %%Panel.PageHeader%%
  • Config – Indicates a placeholder for text that is contained in your configuration file which can be edited from your Settings page in the control panel. Eg. %%Config.WebsiteDescription%%
  • LNG (Language) – Language placeholders display text from the language files located inside the iwp/includes/language folder. Eg. %%LNG_NewAuthorIntro%%
  • Global – Global data is set server side using PHP. Generally the variable for a Global place holder is set by the corresponding PHP file for the panel located inside the iwp/includes/display folder. These placeholders generally do not need to be modified unless you are an advanced user with PHP skills. This contains data that needs to be calculated dynamically, such as the article content, title, date, author and so forth. Eg. %%GLOBAL_AuthorName%%

    If you wanted to change how a particular Global variable is set, then you can modify the PHP file that matches the same name as the Panel file it is being used in. For example, to modify the %%GLOBAL_Title%% inside the ViewArticlePanel.html (Used to display the Title of the Article) you would modify the iwp/includes/display/ViewArticlePanel.php.

    The variable name being set inside the PHP file would match the name of the Global place holder. For our above example, it would be: $GLOBALS[‘Title’] so you can search for $GLOBALS[‘Title’] = blah; to locate where the variable is being set.

Template Wrapping

A unique feature in Interspire Website Publisher is the ability to automatically wrap the template around any HTML file so it looks exactly like every other page in Interspire Website Publisher.

How it works:

Step 1. Inside the iwp/html folder (Create the html folder if one doesn’t exist) you place any HTML file. For example, let’s say we had this HTML file called “readme.html” that contained the following code:

This is my readme html file


This is line 2 of my readme html file It looks like this:

It looks like this:

We would place this readme.html file inside the iwp/html folder.

Step 2. You can now access this file by going to http://www.yourdomain.com/pages/html/readme.html

(Note the added “pages” part of this URL. This allows Interspire Website Publisher to parse the file and wrap the template around it.)

It will now look like this:

Your Interspire Website Publisher template will automatically be wrapped around this file.

Note that this will look different depending on which template you’re working with.

Include external files and scripts using the Include Function

Inside any Interspire Website Publisher Layout or Panel file you can use an include tag to include files outside of Interspire Website Publisher. They will be rendered with the template wrapped around. This is similar to the Template Wrapping feature above, but allows you to have more control. The Include function allows you to include HTML files as well as script files such as PHP. This is extremely useful if you want to include third party scripts such as a Photo gallery, Poll etc.

The Include function allows you to include local files that are found on your web server or a URL to an external file.

Examples:

Basic Usage:
%%Include.myfile.html%%

Full path local file:
%%Include./home/mysite/public_html/otherfiles/myfile.html%%

Relative Path Local file (notice the 3 dots? You need to keep in mind that the function requires a dot right after the word Include):
%%Include.../../../otherfiles/myfile.html%%

External URL:
%%Include.http://www.myotherwebsite.com/latestNews.php%%