In this tutorial, you will learn about some useful resources that will help you to learn Episerver CMS. Getting started with an unfamiliar bit of technology can be daunting at first. Luckily, Episerver CMS is fairly easy to learn. There are also a ton of useful Episerver CMS tutorials available online to help you. Today's guide can be thought of as a complete newbie's guide to Episerver CMS. I decided to write this post because when I first started messing around and learning Episerver v5, I definitely struggled to find the right answers to some of my questions. I think life for people wanting to learn Episerver is a lot easier compared to when I started out, however, I have yet to find a comprehensive guide that ties some of the great Episerver CMS tutorials together. Reading all the links references in this guide, will mean that in no time at all, you'll have very impressive Episerver ninja skillz 🐱‍👤🐱‍👤🐱‍👤

What Is Episerver CMS?

Episerver CMS is one of the most popular enterprise-level Content Management System (CMS) around. Episerver is an incredibly powerful and flexible platform that will allow you to build pretty much any website or web application that you want to. Episerver is built upon the Microsoft ASP.NET stack, meaning you will need to know C# to develop against it. If you are completely new to the concepts of CMS systems, I suggest you read Beginner’s Guide: What is Episerver?. That tutorial will hopefully answer all your questions about what Episerver is, why you should use it and who else is using it.

The iContent Interface

One of the first things that you need to master when you start out with Episerver is the notion of content. All websites are made up of a hierarchy of pages. The homepage is always the page at the top of the hierarchy. Each website will have different types of pages. These pages will have similar layouts, a landing page, or a content page are good examples. These types of pages are modelled in the CMS as things called page types.

Each page might also have a number of reusable components shared between them. In Episerver these reusable components are called blocks. In order for Episerver to create a nice and clean API, one where you can work with both pages and blocks easily, they developed the concept of iContent. In Episerver all pages and blocks all implement from the same interface, iContent. This interface defines the properties something needs to possess in order for it to be usable in Episerver. More information about the iContent interface can be found in this Episerver CMS tutorial, What is the IContent Interface?

The concept of the block is one of Episerver CMS's strong points compared to other CMS systems. Blocks allow content editors to have more control over the layout and structure of each page. The content editor can decide which order they want components to be added and how they look. As well as adding blocks to a page, a content editor can also define the width of a block. An editor might want a banner to only render a block over half the page width. This is possible in Episerver using display options. Display options are disabled by default, so you will need to enable them. Once enabled, a content editor will be able to set to blocks to render25%, 50%, or 75% of the page width. More information about what an Episerver page or block is can be found in this Episerver CMS tutorial, What Is The Difference Between An Episerver Page and an Episerver Block? and How To Set A Default Display Option View For An Episerver 10 Block

Content References

By now you should hopefully understand the difference between pages-types and blocks and that every page and block within Episerver has to implement this special interface iContent. A website would be pretty boring if none of the pages were linked together. This is where we get on to the next concept, the content reference. If you think about posting a letter, each house needs its own unique address in order for your letter to get to its destination. Episerver pages and blocks work in exactly the same way. Each component needs a unique identifier in order to be able to communicate with it. In Episerver terminology this identifier is called a content reference.

I mentioned above that all Episerver items need to implement the iContent interface in order for it to work with Episerver. One of the properties of the iContent interface is a content reference. This means that in order for an item to work in Episerver, it has to have a unique content reference. When content editors create pages, Episerver will automatically create a content reference for any page. The value of the content reference is based on a page ID and a few other things. More information about how the content reference works can be found in this Episerver CMS tutorial, Why Does Episerver Need A Content Reference?

Code First Development

Next, let us talk about how content editors add text into the CMS . Your website will need a homepage. In Episerver you can create page-types in code rather than within the CMS. You can create a new C# class and then make it inherit from some special Episerver attributes. The next time you compile the site and run it, the page type will be created in the CMS. To allow content editors to add content to a page, you need to add properties to the class. Let's say you wanted to allow an editor to add some welcome text to the Homepage page-type, the code to do this is shown below:

The code above is pretty similar to how you would create any C# class. The main differences are the Episerver attributes and base classes you need to use. When you run your Episerver website, on start-up Episerver will scan all your code and anything it finds with the ContentType attribute, it will add it as a page-type within the Episerver database. Content editors should then be able to create a page using that page-type within the CMS editor. This process is really simple to start using for any C# developer. You create a class and Episerver does the rest for you. More information about the page types can be found in these tutorials:

Block Types

Just like page-types can be defined in code, blocks are also defined in exactly the same way, by C# classes. A class to define a block would look like this:

More information about what an Episerver page or block is can be found in this Episerver CMS tutorial, EPiServer Blocks A Quick Reference Guide 7.

Properties

A blank page-types or block would be dull, so you will need to decorate them with properties. Unlike a normal C# class, Episerver provides a number of custom properties that allow pages to have more interesting components. A website would be pretty dull if all it contained were some simple strings or dates. Some of the Episerver specific properties include:

ContentArea: This allows the content editor to drag blocks into an area

XhtmlString: This provides a content editor with an HTML editor. This editor works a lot like Microsoft word, so people can highlight and format content easily.

ContentReference: A reference to another page, or block

LinkItemCollection: A list

More information about the properties available in Episerver can be found in:

Episerver APIs

As Episerver defines the content of your website it makes using the APIs really simple. The most common API you will use is the IContentRepository. IContentRepository allows you to get pages based on a content reference, create pages in code or even delete pages in code. A simple example of how to get a page via the API can be found here, How To Get The Current Page In Episerver 8?. The code looks like this:

When you start with Episerver CMS there is a lot to learn. The aim of this post is to introduce some of Episerver's core concepts by outlining a number of useful Episerver CMS tutorials that will help you on your way to Episerver mastery. Each section outlined above is a key concept in order to master Episerver. There is a lot to take in for a first read, so I would suggest you bookmark this page for reference. Over the years, I've worked with a number of CMS systems and Episerver is definitely one of the easier CMS systems to learn. At the time of writing, it's my favourite to work with!. If you are reading this then you have definitely made a good decision. If you are unsure about anything, please leave a comment below and I'll try my hardest to get back to you. Happy Coding 🤘