Web application developer

Basic structure of Umbraco

umbraco

Written by: willem | Nov 17 2012 6:41 PM

This is the second post of my series of Umbraco basics. In this post I will explain the basic structure of displaying content in Umbraco. This covers creating content, creating a document type and applying a template to content.

What this tutorial will cover

Since Umbraco is a content managing system, you probably want to create content for your website. I will show you:

  • How to create content
  • What a document type is
  • How to create a document type
  • How to create a template for you content

For this tutorial you will need a clean Umbraco install like I described in the first post of these series

Content and document type

In Umbraco you can create content. Content can be all kind of things like pages, blog posts or products in a shop. The definition of the content is called "document type". The document type describes the structure of content, with a set of fields called properties. These properties can be anything from a text field to a date picker. It is even possible to define custom properties. So every content has a document type describing how to content is structured.

To create a document type go to 'settings' in the back end of Umbraco and expand the 'Document Types' folder.

01

Right click 'Textpage' and click 'Create'

02

In the next window type for name 'NewContentType'. Make sure the 'Create matching template' option is checked and click 'Create'.

03

When you check the option 'Create matching template', Umbraco will also create a template that will fit your document type. I will go into more details about this later.

Because we right clicked on the 'Textpage' document type, we created a child of Textpage, meaning this new document type will inherit all properties of Textpage. Practically we make a new Textpage content type with extra properties.

Now click the 'Tabs' tab. Type 'CustomTab' in the New tab field en click 'New tab'

04

Click the 'Generic properties tab' and expand the 'Click here to add a new property' field by clicking the arrow symbol.

05

In the expanded area type 'Extra Field' for name. The Alias field will automatically be made while your typing. Choose for Type 'Rich text editor' and for Tab our newly created 'CutomTab'. Click 'Save' on the left top to save the new property.

The Type field defines what kind of field it will be when you create content of this type. Later when we make the first content of our 'NewContentType' type, you will see that a text editor is shown for this field.

06

Templates

Templates are used to markup the content. In Umbraco templates are similar as aspx pages: you can write html and use controls. It is also possible to create master pages. Umbraco offers a range of built in controls for use within templates.

Under 'settings' expand the 'Templates' folder and look for 'NewContentType'. When the document type was created the 'create matching template' option was checked, so this template has been automatically created for us. Click 'NewContentType' to open it in the editor.

07

The code you see starts with a directive for a master page. It refers to 'default.master' which is the basic master page for Umbraco. This master page has a content place holder with Id 'ContentPlaceHolderDefault'. To add content to a page you need to put it in this content place holder.

Add two lines to the content part:

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
Body Text: <umbraco:Item runat="server" field="bodyText" /><br />
Extra field: <umbraco:Item runat="server" field="extraField" />
</asp:Content>

As you can see there are two controls added of the type 'umbraco:Item'. This is a Umbraco control to show the content of a property. Here the properties bodyText and the earlier created property 'extraField' is used. Since you inherited our NewContentType from the Textpage document type you have access to the Textpage's bodyText property.

Now save the file by pressing ctrl + s or use the button in the left top corner.

Creating and showing the content

Before you can create new content you need to configure the 'Blog' document type so that it will allow the 'NewContentType' as a child. Because Blog is the base content of the site and you want to make a sub page you need to tell the blog that you want to do this.

Go to 'Settings' en click 'Blog' under the 'Document Types' folder. Click on the 'Structure' tab and check the 'NewContentType' option. Don't forget to save the new setting.

08

Finally everything is ready to actually create the content. In the 'Content' area right click 'Home' and click create.

09

Type the name, select the document type 'NewContentType' and click 'Create'.

10

You will see the content management window with the tab 'Content' open. Type something and click the 'CustomTab' tab. This is the tab which is defined under tabs when the document type was created.

11

Again, write something in the text area.

12

Next click the 'Save and publish' button, next to the save button on the left top corner. The content is saved now and directly published to the website.

Now click the properties tab of the just published content and click the link to the document.

13

A new tab is opened showing the content you just created.

14

This is all. In my next post I will explain how I changed the Umbraco weblog starter kit to the site I have now.

3 Comments

  • I am absolutely new to Umbraco and this was a good article containing the answer to my basic questions on document type ,templates and Contents . Thanks a lot

    pm said
  • You're welcome! Glad I could help.

    willem said
  • Hi

    Your article is good, I tried to create an umbraco website application, but I got the following error after installing business starter kit.

    Error reading XSLT file: \xslt\umbBlogRssFeedLink.xslt
    Error reading XSLT file: \xslt\umbTopNavigation.xslt

    How do I fix this?
    thanks

    mira said
Add a Comment

About Me

I'm a web application developer specializing in asp.net. I have skills in asp.net, C#, html5, javascript, asp.net mvc, design patterns and more.

more about me

Random background module

This module for Orchard CMS lets you upload a list of images. For every page it chooses one randomly and sets it a the background image.

Go to project page on CodePlex
Download module

The Monack Framework

This open source framework makes it easy to build and develiver custom web applications. Unfortunately I can't spent much time on it so it is still work in progress. 

More about MonackFr
Project page at CodePlex

Orchard

Since I decided to create this website in Orchard and didn't know anything about
it when I started, I also post my experiences with this CMS.