Steve Morgan www.siempresolutions.co.

uk

How to Create an Umbraco Website from

Flat HTML Files

Revision History

Version Release Date Author Comment / Amends

1.0 20/04/2014 Steve Morgan Initial Release.

Siempre Solutions Ltd www.siempresolutions.co.uk | Introduction 1

1 Introduction
The idea of this document is to take you step by step through an Umbraco website build. It will allow you
to take any website template (e.g. flat HTML, CSS and JS) and install it into a fresh Umbraco and wire up
the sections that need content managing in Umbraco. Umbraco is a seriously powerful CMS but many find
the learning curve of installing a website from scratch a little too much this guide aims to explain the
mysteries!

We avoid using one of the starter kits as when it comes to building your own site these dont give you an
understanding of the basics of Umbraco Document Types and Templates and how these work together to
build pages.

2 What Youll Need

To take you through a demo of installing a basic site in Umbraco you need the following:

A clean, empty installation of Umbraco e.g. no starter site installed, see the notes below what to
do when running through the installation wizard. Use the latest main 7.X download. Follow the
installation steps in the documentation http://our.umbraco.org/documentation/Installation
A copy of Initializr a HTML5, responsive template which is a nice start for any website.
https://github.com/verekia/initializr-template/archive/master.zip if you prefer you can use your own
flat HTML files but my examples will use this.

3 Getting Started

3.1 Installing an Empty Umbraco

This guide doesnt cover the installation of Umbraco follow the instructions in
http://our.umbraco.org/documentation/Installation. When you see the first splash screen click customize
either fill in your MS SQL blank DB credentials or use the CE option then on the final screen use the
No thanks I do not want to use a starter website.

Siempre Solutions Ltd www.siempresolutions.co.uk | Introduction 2

 Figure 1 - Installation Splash Screen - note the Customize link

Figure 2 - Install a starter website - No Thanks!

3.2 Checking you have an Empty Umbraco Install

When you hit your local host address (http://localhost or whatever youve set up) you should see the
Umbraco empty page screen.

Siempre Solutions Ltd www.siempresolutions.co.uk | Getting Started 3

 Figure 3 - This is correct we have a blank, empty Umbraco website!

If you can see the Umbraco Starter kit site youve missed the option to install Umbraco with no starter site.

Figure 4- You should NOT see this!

You need to reinstall Umbraco if you can see the starter kit if you did a manual install you can delete all
files in the directory where your local host is being served from, copy the Umbraco zip contents back in and
then hit localhost.

3.3 Preparing the Initializr Template Site

Siempre Solutions Ltd www.siempresolutions.co.uk | Getting Started 4

Now unzip the Initializr contents to a folder onto your desktop (or a place of your choosing). Now open
the index.html from this directory in your preferred browser to see the template you can see its full of
lovely filler text with dummy links. Were going to turn this into a fully fledged, working site!

Figure 5 - The Initializr Template

Log into your Umbraco installation (e.g. go to http://localhost/umbraco in your browser). You should be
faced with an empty Umbraco installation but where to start!?

Figure 6 - A barren, empty Umbraco installation

4 Document Types

4.1 Data first nothing in = nothing out!

Step 1 of any site is to create a Document Type after a few installations youll speak this terminology
but at the start its a little bit bewildering. A Document Type is a data container in Umbraco where you

Siempre Solutions Ltd www.siempresolutions.co.uk | Document Types 5

can add data fields / attributes where the editor user can input data and Umbraco can use it to output it in
the relevant part of a template (more on these later).

Document Types are infinitely extendable but usually youll add data fields something like the following:

Page title
Sub Heading
Body Text
Meta Title
Meta Description
...

Each Data Field has a type - e.g. a text string or a number or rich text body... well come to this later.

4.2 Creating your first Document Type

1. Right, lets get busy. Go to the Settings menu in Umbraco. This is the third button on the left hand
black menu with the spanner. Then youll see a long list of settings dont worry about these yet,
well introduce them as we need them.

2. Document Types is strangely positioned as the last option in the list yet its always the starting
point for any Umbraco build. Hover over the Document Types node and youll see three dots ... ,
click this to see the menu. Then click + Create button.

Figure 7 - Creating a Document Type

3. Ignore the Master Document Type drop down for now. Give our new Document Type the Name
= HomePage and ensure the Create matching template checkbox is checked. Click Create.

Siempre Solutions Ltd www.siempresolutions.co.uk | Document Types 6

 Figure 8 Name your Document Type

4. Umbraco now adds a Document Type to the tree under the node. Youll see four tabs Info,
Structure, Generic properties, Tabs. Click Info (should already be selected) and then the
Choose... link next to the Icon label. Enter home into the search and you'll have a house icon
this will help our editors in the Content tree later.

Figure 9 - Adding an Icon to Document Type

5. Enter in the Description field This is our homepage template. This text is used to help the user
select the correct document type later.

6. Next click the Structure tab and check Allow at root. This will allow us to create a homepage at
the root (simple huh?).

7. Next we go to the Tabs tab. Create a new tab called Contents and then another called Footer
(enter the name and click the New tab button remembering to click Save after).

Siempre Solutions Ltd www.siempresolutions.co.uk | Document Types 7

 Figure 10 - Document Types - Adding Tabs

8. Now go to the Generic properties this tab is where we create the data containers that the
homepage will need and use. Click on the link Click here to add a new property. Enter the
Name Page Title. When you move to the next field youll see Umbraco helpfully gives you the alias
pageTitle. The Type is defaulted to Textstring and Tab = Contents (remember, we just
created that!). Description again helps the editor so well fill this in The main title of the page
(e.g. Welcome to Widgets Ltd).

Figure 11 - Creating our pageTitle Data Type

9. Ignore the rest of the fields for now and click the green Save button at the top right.

10. Repeat this step, clicking the Click here to add a new property link at the top of the Generic
Properties tab and create these (remembering to click Save each time):

Siempre Solutions Ltd www.siempresolutions.co.uk | Document Types 8

 Name: Body Text

Alias: bodyText

Type: Richtext editor (click the arrow on the Type field!)

Tab: Contents

Description: The main content of the page.

Name: Footer Text

Alias: footerText

Type: Textstring

Tab: Footer (remember to change this!)

Description: Copyright notice for the footer.

11. You should now have a Generic Properties tab that looks like this:

Figure 12 - Generic Properties Tab of your Homepage Document Type

Weve now created our first Document Type Umbraco needs three things to create a webpage and this is
the first and most important. It takes the data inside an instance of the Document Type and merges it with
a template well edit our template next.

Siempre Solutions Ltd www.siempresolutions.co.uk | Document Types 9

5 Creating (Editing) Your First Template
1. Next click the expand node icon (its the small triangle) behind the Settings > Templates folder
you should then see a child node titled Homepage we created this automatically when we
created the Document Type (remember that checkbox?).

NOTE in early versions of 7.1 the tree doesnt automatically refresh to show you this, if its missing
try a hard refresh of Umbraco (Ctrl+F5) should be fixed soon.

Clicking on the Homepage node will load the template which, except for a little bit of Razor code,
is empty!

Figure 13 - Empty Homepage Template

2. Leaving the code thats there (if you dont understand it, dont worry!) lets copy our template code
in. Open up index.html from the Initializr template in your favourite text editor (Notepad++ is
good). Copy and paste the whole thing into this template **after** the closing curly brace }. Your
template should now look like below:

Figure 14 - Homepage template

3. Click the Save button.

We now have a template. Thats two out of the three stages complete for our first page.

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating (Editing) Your First Template 10

6 Creating Your First Content Node
Our third and final stage to creating our first page in Umbraco is to create a content node where a content
editor can add the content and then Umbraco will use this along with the Document Type and Template to
serve up an HTML page to web visitors.

1. Were now ready to create our first page in Umbraco! Click the Content button (first option in the
left hand menu).

2. Hover over the grey text CONTENT and youll see the three dots ... click this. If youve done
everything correctly so far you should see the option to create our Homepage!

Figure 15 Create a Homepage

If you cant see this then dont panic check that Settings> Document Types > Homepage
node > Structure tab > Allow at root is checked.

3. Lets create our homepage. Click the icon and youll see what weve just been setting up our
document type is now going to drive our homepage content it gives us and the editors the fields
they need.

4. In red at the top youll see Enter a name... click this and enter a name (on some browsers this is
hard to see as a field an Umbraco bug has been raised for this). Were going to call this
Homepage.

5. Fill in the following on the Contents tab:

Page Title Welcome to Widgets Ltd

Body Text Hello world! We can write what we like here!

Widgets Ltd 2014

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating Your First Content Node 11

 Click the Footer tab and enter:

Footer Text Copyright Widgets Ltd 2014

6. Now click the green Save and publish button. The menu will reload with our homepage node
under the CONTENT label. And heres the good bit... go and refresh your webpage in your browser
http://localhost the default Umbraco page will be gone and well see a very bare, unstyled page!
Were getting there!

Figure 16 An Unstyled Homepage

6.2 CSS and Javascript

1. Looking at our homepage were obviously missing the CSS and JS from the Initializr template. To
include this navigate to your Umbraco directory in Windows Explorer and copy over the
css\style.css file into the Umbraco\Css folder (replace Umbraco with wherever your Umbraco
instance is being served from e.g. C:\inetpub\wwwroot. Now refresh your webpage in your
browser and youll see a more styled page.

NOTE you could use the Umbraco UI to create your CSS file. Settings > Stylesheets > ... > +
Create and create a stylesheet called style (dont add the file suffix .css) and paste the CSS in I find
it easier to copy the CSS. Using either method should be noted does NOT include them in your HTML
markup automatically Umbraco produces clean output and this means you only wire up what you
want and need.

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating Your First Content Node 12

2. Next copy the scripts folder from the js directory of the initializr template to the Umbraco\Scripts
directory well have to update the template to look in \Scripts instead of \js. To do this go to
Settings > Templates > Homepage and change line 21 to say scripts/... and click Save.
<script src="scripts/libs/modernizr-2.0.6.min.js"></script>

NOTE you can also use the UI interface to create your JS files too Settings > Scripts > ... > +
Create (again dont add the suffix but select .js from the Type dropdown) the reference in your
template should be scripts/myfile.js.

3. Now in dev tools when looking at the http://localhost page you should find that the network tab
doesnt report any missing assets - if it does have a look and fix any typos / check the files are in the
right places!

6.3 Outputting the Umbraco Data Fields

What youll notice though is that our content we added to the homepage isnt being output. We need to
wire up the data properties to the template. Lets look at our template and identify where the data fields
we created before should go.

Figure 17 - Where our Data Fields Content Should be Output

Weve marked in blue where we want our data field content to be output. Now we need to wire up the
relevant fields.

1. Go to the Settings > Templates > Homepage. Scroll down and highlight the text h1#title
around line 27.

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating Your First Content Node 13

 Figure 18 - Preparing to replace the hardcoded text with an Umbraco Page Field

2. Click the button Insert Umbraco Page Field and under the Choose field drop down select
pageTitle from the Custom Fields section.

Figure 19 - Umbraco Page Field

3. Click the green Insert button then the Save button.

4. Next do the same for the content between the <header></header> tags (around lines 42 -43)
using field bodyText. Again click the Insert and then Save buttons.

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating Your First Content Node 14

 Figure 20 - Replacing the bodyText with the Umbraco Page Field

5. Finally we do the footer between the <h3></h3> tags in the footer div (line 68).

Figure 21 - Footer Text

6. Now go and reload your homepage... viola! We have content! Now, we could go back and add two
tabs called Article1, Article 2, Article Footer each containing a title and content field and wire these to
the relevant places in the template. However this would limit the content manager to always having
to have these sections. This might be OK but we could also use child nodes well learn about those
later.

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating Your First Content Node 15

7 Creating More Pages

7.1 Using a Maintainable Template Structure

Weve seen how to create a Document Type. We have a simple three page site, Home, News and
Contact Us. We could easily just create three Document Types and leave Create matching template
checkbox checked to also create three matching templates. Then wed copy the same HTML code, job-lot
into each template. This would work on a very simple site it actually has some merits however once a
site starts to grow this would lead to problems for instance changing anything in the menu needs to be
done on each template - it also means wed need the user to set the footer on each page etc.

Umbraco provides us with an elegant solution to keeping a consistent base template those familiar with
MVC will recognise it.

To start were going to unpick a little bit of what we did in creating the homepage to sit the homepage
template under a master.

7.2 Create a Master Template

1. Go to the Settings > Templates and open up the tree. At the moment we just have our
Homepage template. Hover over the Templates menu and click the menu ... button. Create a new
template called Master, click + Create and then give it the name Master . Remember to click
Save.

Figure 22 - Master Template

2. Now were going to move the Homepage template under the Master template. To do this select
the Settings > Homepage node and from the Properties tab >Master template drop down
select Master and then click Save. This will update the Razor code section to change Layout =
null; to Layout = Master.cshtml (you may have to click off the Homepage node and back on to
see this update a bug that will be fixed in a future release of Umbraco).

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating More Pages 16

 Figure 23 - Homepage Template now sits under the Master

3. Now we need to move the parts of our HTML template that are common across all pages into the
Master. This is where as a developer you might need to use your brain as it will be slightly different
for different websites e.g. do all pages have a <div id=main> as so can we put this in the master
or does this belong to only certain pages? For this site well assume this is part of the child page. Cut
everything from the closing curly brace to line 37 <div id=main-container> - were going to move
the header and nav of the site to the master template. Cut this and click Save.

Figure 24 - Homepage Template After Cutting the Header

4. Now click on your Master template and paste this HTML markup after the closing curly brace and
remember to click Save.

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating More Pages 17

 Figure 25 - Master Template after Pasting the Header

5. At the end of this markup we need to tell Umbraco to insert the child templates content this is
done by adding the code @RenderBody() at the end (around line 37). Click Save.

Figure 26 - Adding RenderBody() to the Master Template

6. Now well do the same with the footer content. Cut everything from the opening of the footer-
container div (approximately line 33) from the Settings > Templates > Homepage > template
tab, click Save and then paste this into the Master template under the @RenderBody field weve
just added. Remember to click Save.

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating More Pages 18

 Figure 27 Completed Master Template

7. Now weve done a lot of work and what we should see if we refresh our localhost page is nothing
has changed! If you have a compilation error youve perhaps mistyped @RenderBody(). If youre
missing any content (header or footer) check that what you have in the templates matches the
following:
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = null;
}<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>
<meta name="description" content="">
<meta name="author" content="">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" href="css/style.css">

<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>

<div id="header-container">
<header class="wrapper clearfix">
<h1 id="title">@Umbraco.Field("pageTitle")</h1>
<nav>
<ul>
<li><a href="#">nav ul li a</a></li>
<li><a href="#">nav ul li a</a></li>

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating More Pages 19

 <li><a href="#">nav ul li a</a></li>
</ul>
</nav>
</header>
</div>

@RenderBody()

<div id="footer-container">
<footer class="wrapper">
<h3>@Umbraco.Field("footerText")</h3>
</footer>
</div>

</body>
</html>

Figure 28 - Complete Master Template

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "Master.cshtml";
}
<div id="main-container">
<div id="main" class="wrapper clearfix">

<article>
<header>
@Umbraco.Field("bodyText")
</header>
<section>
<h2>article section h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum
iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis
nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit
suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
</section>
<section>
<h2>article section h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum
iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis
nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit
suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
</section>
<footer>
<h3>article footer h3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum
iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis
nec. Curabitur posuere enim eget turpis feugiat tempor.</p>
</footer>
</article>

<aside>
<h3>aside</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis
libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit
suscipit ultrices.</p>
</aside>

</div> <!-- #main -->

</div> <!-- #main-container -->
Figure 29 - Complete Homepage Template

If youre new to these concepts then I dont think what weve just done is going to make much sense
until we make our next page.

7.3 Creating More Pages Using the Master Contact Us

1. Were now going to make a simple page where well just put our contact details. For added
functionality you might want to look at replacing this with a contact us form see
Siempre Solutions Ltd www.siempresolutions.co.uk | Creating More Pages 20
 http://our.umbraco.org/projects/tag/contact%20form . For now lets create a simple page a page
where the user can provide a title and some rich text. This is very similar to our homepage document
type at the moment but were assuming that youll go and develop this into something very specific
(e.g. adding the featured article and other article content blocks).

2. Go to Settings > Document Types (hover) > ... > + Create . Lets create one called Simple
Content Page. Leave the Master Document Type drop down to none... (the use of allows you to
inherit property types from parents, Id recommend you dont use it unless there is a definite need)
but well create a matching template so leave this checked.

3. Firstly lets select an Icon type the word Content into the filter and select the document icon. In
description type A simple content page, leave the Allowed Templates as it is (e.g. only Simple
Content page checked). Click Save.

4. Now click on the Settings > Templates (hover) > ... and then Reload Nodes. Click on your
Simple Content Paqe node and then the Properties tab. Change the Master template drop
down to select value Master this will mean that well get the header and footer from the master
just as we do in the Homepage template. Click Save then load the Template tab you should see
the portion of Razor code has updated to say Layout =Master.cshtml if it hasnt updated itself
click on a different node and then back again to reload it. Now add the following HTML to the
template and click Save.
<div id="main-container">
<div id="main" class="wrapper clearfix">
<section>
<h2>Header goes here</h2>
<p>Content goes here</p>
</section>
</div> <!-- #main -->
</div> <!-- #main-container -->
Figure 30 - Contact Us Template HTML

5. Now lets create a page using our new Document Type and Template go to Content >
Homepage (hover) > ... > Create. Oh but we cant! Well see an error like that below:

Figure 31 - Umbraco Content Error - No Document Types Available

6. This is by design Umbraco limits the editors to only being able to create content in the places that
you, the developer, allows. This will stop a user from breaking a site design (or an entire site) when
they create a new homepage under the news container node later! Unfortunately this functionality
also confuses a lot of new Umbracians hence why we show you this error here.

Go to Settings > Homepage on the Structure tab youll see a list of checkboxes under a label
Allowed child nodetypes (be careful not to confuse this with the Info tabs Allowed templates
well cover that later). So we need to allow users to be able to create child nodes below our
Homepage of type Simple Content Page. Check the box and hit Save.

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating More Pages 21

 Figure 32 - Homepage - Allowed Child Nodetypes

7. So there is the confusing bit first we create the Simple Content Page but then we have to allow
it to be created under the document type that will sit above it e.g. we create our new Document
Type but then have to update the Homepage settings to be able to use it. Well do this again later
when we create an Articles container and Article item well need to allow the Article items under the
container. Simple perhaps not but youll get used to it!

8. Now go back Content > Homepage (hover) > ... > Create now we have the Simple Content
Page! Select this and enter a name (red text at the top). You can see that we only have a
Properties tab here no data. This is different to the document type for the homepage as weve
not yet created any tabs nor data properties (e.g. no bodyText or pageTitle!). Click Save and
Publish.

Figure 33 - Creating Our Contact Us Page

9. Our Content tree will now reload and there will be a Contact Us page under the homepage. This
is the recommended structure for most sites your primary level 1 pages will sit under the
Homepage. Go look at this page if you look at the Properties tab you can see a Link To
document row click this. You might find an unstyled page again. This is because the template
designers have assumed that your site will be a flat structure e.g. all pages sitting at the same level

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating More Pages 22

 so the browser cant find the CSS or JS at the page level below the homepage. You need to update
the Master template to add a leading slash on the JS and CSS source lines.

E.g. change the lines in the Master Template:

CSS <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/css/style.css">

To:
JS <script src="js/libs/modernizr-2.0.6.min.js"></script>
<script src="/js/libs/modernizr-2.0.6.min.js"></script>

10. Save the template changes and reload your Contact Us page. Well now have a pretty empty
looking page.

11. Lets add two simple fields pageTitle (type = Textstring) and bodyText (type Rich Text Editor).
Follow the instructions in creating the Homepage document type if youre not sure how to do this.
Then wire these fields up by editing the Template, again follow the Homepage section if this isnt
yet second nature to you yet!

Figure 34 - Contact Us Generic Properties

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating More Pages 23

 Figure 35 - Contact Us Template with Data Fields

12. Now add some content under the Content > Homepage node > Contact Us node. Click Save
and Publish and you should have a slightly more interesting page when you reload it!

Figure 36 - Contact Us with Some Data

7.4 Using Data Fields from the Homepage

1. What you may notice is that the footer is now empty we dont have our content from our
Homepage node. We need to tell Umbraco to get the content from the parent Homepage tab. To do
this we edit the template (the Master).

Siempre Solutions Ltd www.siempresolutions.co.uk | Creating More Pages 24

 Highlight the Umbraco field in the footer <h3> tags and then click the Insert Umbraco page field

button again. here is where all of the options we ignored earlier come into play choose
footerText again from the Choose field dropdown but this time well check the Recursive
checkbox. This tells Umbraco that if the field doesnt exist at the node level for the page were
requesting (e.g. Contact US) it will look up the content tree (so in our example go to the Homepage
for this content) this means you could also create a footerText element at the Contact Us page if
you wanted the editor to override the site wide default but for fields like this its not normally used.
Click Insert and youll see a different bit of Razor is added : @Umbraco.Field("footerText", recursive:
true)

2. Click Save and reload our Contact Us page.

7.5 Master Template The Menu

1. Now lets fix the menu there are two ways of doing this, you could have Umbraco dynamically
create a menu from the pages it has in the Content Tree, so that when an editor creates a page it
automatically appears or, more simply you can hardcode it. Were going to hardcode this for now (its
a good idea as you start building a site to hard code this so you can move around testing before you
replace this) and well leave it to you as an exercise to do this later. Edit your Master template
edit the <li> items under the <nav> tags to say:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/contact-us">Contact Us</a></li>
<li><a href="/articles">Articles</a></li>
</ul>
</nav>
Figure 37 - Master Template - Menu / Nav Section

2. Save your changes and lets test our menu. Youll find that clicking on the Article link throws an
Umbraco error as weve not created this page yet. Lets do that now.

8 Parent Pages with Infinite Children

Having an Articles Parent page and a number of associated child articles which the editors can add to freely
is a good example of the power of Umbraco. Well assume our fictional company, Widgets Ltd, write about
ten articles a month and want the articles page to act like a blog (e.g. you could use this functionality for a
blog or news and events pages)!

8.1 Creating the Articles Parent and Article Items

1. Create two new Document Types Articles Home and Articles Item Document Types Settings >
Document Types (hover) > ... > + Create . Remember to leave Master Document Type =
none...

2. Create the following Tabs and Data Properties:

Articles Main

Tab = Intro

Siempre Solutions Ltd www.siempresolutions.co.uk | Parent Pages with Infinite Children 25

 Articles Title Type = Textstring

Articles Body Text type = Rich Text Editor

Figure 38 - Articles Main Document Type Data Properties

Articles Item

Tab = Contents

Article Title Type = Textstring

Article Contents type = Rich Text Editor

Figure 39 Article Item Document Type Data Properties

3. Now go to the Settings > Document Types >Articles Main node > Structure tab > Allowed
child nodetypes and check the Articles Item. This allows us to create items under the main
(which acts as a parent container). We also need to allow the Articles Main node to be created
under the Homepage node (do this in the Settings > Document Types > Homepage node >
Structure tab > Allowed child nodetypes dont check the Articles Item only the main
should be at this level).
Siempre Solutions Ltd www.siempresolutions.co.uk | Parent Pages with Infinite Children 26
4. Now go to Content > Homepage node (hover)> ... and create a node called Articles of type
Articles Main (if you dont have this option go back and check your allowed child nodes did you
forget to click Save)? Give the Articles node some content and a title and then create a couple of
article item content nodes under this node (Content > Homepage node > Articles node (hover)
> ...

5. Now you should have a content tree that looks like this below (obviously with your own content node
names that you added before). Lets go update our templates we just created (automatically when
we created the Document Types). First update them to use the Master as a parent Settings >
Templates > Articles Main node > Properties tab > Master template dropdown = Master
do the same for the Articles Item remembering to click Save.

Figure 40 - Content Tree With Articles

6. Copy the template content from the Simple Content Page template and paste this into each
(clicking Save). Then replace the Page fields with the relevant e.g. articlesTitle and
articlesBodyText for the Articles Main and the articleTitle and articleContents for Article
Item.

7. If we now go and check our Articles Main page in the browser we should see our content. Now we
need to list the children under this so that we can see a list of our articles. Umbraco makes this easy
for us but we need to use a bit of Razor.

8. Click on the Developer menu from the left hand side menu and then hover over the Partial View
Macros Files node to get the more menu ... then click + Create. Name this listArticles and
select the List Child Pages Ordered By Date in the Choose a snippet field and click Create.

Siempre Solutions Ltd www.siempresolutions.co.uk | Parent Pages with Infinite Children 27

 Figure 41 - Template for Articles Parent with the Macro Code

9. Now all we have to do is wire up the Articles main page to list our child articles. Edit the Articles Main
template Settings > Templates node > Master node > Articles Main node > Template tab.

Under the paragraph tags enter a carriage return and then click the Insert Macro button
then click Save.

10. Check what we have on our Articles page now - were really getting somewhere! Lets make it a bit
more real world Ill leave the understanding of this to Razor lessons / The Umbraco videos but it
will finish our site off nicely edit the Partial you just created Developer > Partial View Macro
Files > listArticles.cshtml and change the content to be:
@inherits Umbraco.Web.Macros.PartialViewMacroPage

@* OrderBy() takes the property to sort by and optionally order desc/asc *@

@foreach (var page in CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc"))

{
<div class="article">
<div class="articletitle"><a href="@page.Url">@page.Name</a></div>
<div
class="articlepreview">@Umbraco.Truncate(@page.ArticleContents,100) <a href="@page.Url">Read
More..</a></div>
</div>
<hr/>
}
Figure 42 - Improved Macro for listArticles

11. Now check this in the browser!

Siempre Solutions Ltd www.siempresolutions.co.uk | Parent Pages with Infinite Children 28

 Figure 43 - A Completed Articles Page

9 Conclusions
What we now have is a fully fledged working site! Hopefully this guide should have given you all of the
basics to see how to create your own site in Umbraco. For the majority of sites youll create they wont be
much more complicated than this. Weve not written any code nor have we needed to work much out of
the Umbraco UI.

This is not the limit of Umbraco youve barely scratched the surface in this guide.

For further reading / exercises Id recommend working through the video tutorials:
http://umbraco.com/help-and-support/video-tutorials.aspx
There is also a wiki (of which the intention is to use this guide to populate the Creating a basic site
with Umbraco section). http://our.umbraco.org/documentation
For help and guidance on anything this guide doesnt cover the forums are a great place to start:
http://our.umbraco.org/forum
This guide was produced by Steve Morgan of Siempre Solutions for more info contact him via
http://www.siempresolutions.co.uk

Happy Umbraco-ing!

Siempre Solutions Ltd www.siempresolutions.co.uk | Conclusions 29