Basic structure of Umbraco
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.
Right click 'Textpage' and click 'Create'
In the next window type for name 'NewContentType'. Make sure the 'Create matching template' option is checked and click 'Create'.
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'
Click the 'Generic properties tab' and expand the 'Click here to add a new property' field by clicking the arrow symbol.
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.
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.
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" />
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.
Finally everything is ready to actually create the content. In the 'Content' area right click 'Home' and click create.
Type the name, select the document type 'NewContentType' and click 'Create'.
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.
Again, write something in the text area.
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.
A new tab is opened showing the content you just created.
This is all. In my next post I will explain how I changed the Umbraco weblog starter kit to the site I have now.