Umbraco/Samples and Articles/Templates/MasterTemplates

Using Master Templates

Introduction

A master template in Umbraco can be included by child templates in order to ensure that a set of pages have common elements (typically header and footer).

You will need to understand how to create Umbraco documents and template types before reading this article.

Example of a master template

In this very simple example we are going to create a master template that will create the opening HTML and HEAD tags, open the BODY tag, insert the child template and then close the HTML tag.

In Umbraco, create a template called 'Master' (can be called anything) with the following code.

<html>
	<head>
		<title>
			<?UMBRACO_GETITEM field="pageName"/>
		</title>
	</head>
	<body>
		<?UMBRACO_TEMPLATE_LOAD_CHILD/>
	</body>
</html>

Important! a bug was reported in Umbraco 2.1 where whitespace in <?UMBRACO_TEMPLATE_LOAD_CHILD/> could cause the master/child template functionality to fail. Please copy and paste exactly as is.

Notes on the example master template

The above template should be fairly familiar HTML. There are two Umbraco tags that need your attention:

<?UMBRACO_GETITEM field="pageName"/>

The pageName attribute is a common element across all nodes in the Umbraco content XML. The code above simply inserts this name into the html title tag.

<?UMBRACO_TEMPLATE_LOAD_CHILD/>

The above code tells Umbraco that this is the place in the markup where a child template should be inserted. We will learn how to do this in the next step.

Creating the child template

In Umbraco, create a template called 'Child' or whatever you want.

In the left hand menu click on the template you just created.

The source of the template can be anything you want, but for this very simple example let's use the following:

<p>I am output from the child template</p>

Before you save the template, change the select box labelled 'Master Template' so the value is set to the master template you created in the first step of this tutorial.

Testing your work

Choose a document type from the settings menu, or create a new blank document type.

Add the child template you created in the second step of this tutorial to the Allowed templates for your document type.

Goto the content section of Umbraco and create a node of the document type.

Now preview the node with the Temlate type set to the child template you created in the second step of this tutorial.

View the source of the preview and the results should show your master template has been included around the child template as follows:

<html>
	<head>
		<title>
			Node Title
		</title>
	</head>
	<body>
		<p>I am output from the child template</p>
	</body>
</html>

Further steps

You can now extend your master template to include a common stylesheet and other metadata in the HEAD element.