Web application developer

Alter default blog in Umbraco

umbraco

Written by: willem | Jan 27 2013 10:54 PM

When you install the blog package that comes with the installation of Umbraco, the home page of your website will contain the list of blog items you make. Since my website is not only a blog but also provides information about other things, I want to have a custom home page. In this tutorial I will show you how to change the default installation of the blog package and make your own home page.

The following steps will be described:

  • Removing the default pages
  • Adding a custom home page
  • Adding a sub page with a list of blog items
  • Adding a blog item

This tutorial continues from the installation described in the previous blog item Installing Umbraco on localhost.

Removing default pages

Go to the administrator area of your Umbraco installation by adding /umbraco/default.aspx to the base url. Next log in and go to the "content" section by clicking the content button on the left bottom of the screen.

Next remove the default generated pages by right-clicking the blog folder en selecting "delete".

000

Confirm the action and the Blog directory is deleted.

Adding the home page

Now right-click the content folder in the top of the content tree and click create.

001

Type "Home" in the name field and select "Blog" as content type. This will be the "home page"

002

The new content will open in edit mode. Type some text and click the "save and publish" button in the top right corner of the toolbar.

003

Adding a new blog

Now create another content item:

004

and call this Blog. Select Text page as content type. This will be the page where the blog items are shown.

005

The new text page will open in edit mode. To show the blog items you need to add a macro to the text area. Macros are pieces of extra functionality to Umbraco. In my next blog post I will explain more about this.

Add a macro by clicking "insert macro" on the right of the toolbar.

006

Select "Blog list posts" and click "OK".

007

Don't forget to hit the "save and publish" button to save the changes of this page.

Create a blog item

Again, create new content:

008

Select "Blog post" as content type. Also type a nice name for this first blog item.

009

Type some text and add a tag. Hit "save and publish" to publish the new blog post.

010

Now click in the folder tree the blog page. That is the page where you just inserted the blog list macro. When the page opens you will see a preview of your just added blog post.

011

That's it! Check the front of your website and you will see your changes.

The home page:

012

and the blog list page:

013

See my next post about how to change the way the blog list looks.

2 Comments

  • Have you updated your version of Umbraco recently? I see you have the error parsing xslt for the top nav on this page have you completely replaced the bin folder when you did the upgrade?

    Darren Smith said
  • No I did not upgrade Umbraco. I found some problems with tagging blog items in the newer versions.

    Could you be more specific about the error you get? Are you talking about this website or the one in the tutorial?

    willem 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.