Skip to the content

Create a custom section in backoffice - Umbraco 9 .Net Core | Part 1

Creating the custom section

The first thing we need to do is go to the "App_Plugins" folder and we will create a new folder inside it called "MyCustomProduct" and then create a "package.manifest" which will handle our configuration and custom views later on.

Register the custom section

To register our custom section there are two ways on how we can handle them.
• via package.manifest
• via c#

In this guide, we will implement it using c# for us to gain more control.

Create a new class called "MyCustomProductSection" that implements "ISection"

using Umbraco.Cms.Core.Sections

namespace Umbraco9.Blog.Backoffice.MyCustomProduct
    public class MyCustomProductSection : ISection
       public string Alias => "myCustomProduct";
       public string Name => "My Custom Product";

then we need to add this to the composer section pool by creating a new class called "MyCustomProductSectionComposer" that implements "IUserComposer".

using Umbraco.Cms.Core.Composing;
using Umbraco.Cms.Core.DependencyInjection;
using Umbraco.Cms.Core.Sections;

namespace Umbraco9.Blog.Backoffice.MyCustomProduct
    public class MyCustomProductSectionComposer : IUserComposer
        public void Compose(IUmbracoBuilder builder)
            builder.Sections().InsertAfter<MediaSection, MyCustomProductSection>();

the snippet above will append the "MyCustomProductSection" after the "MediaSection" in the backoffice. then for us to see the custom section that we have implemented we need to assign it to a certain user first by going to the "Users" section and select your account then edit in the "Assign Access" tab.

then add our custom section.,

after hitting save then refresh the page - we can now see our custom section!

Creating the language translation

If you have noticed that there's a square bracket in our custom section [myCustomProduct] we need to create a language translation for this one.

Under "App_Plugins/MyCustomProduct" create a folder called "lang" and let's create an xml file called "en-us.xml" then copy the snippet below:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<language alias="en" intName="English (US)" localName="English (US)" lcid="" culture="en-US">
  <area alias="sections">
  <key alias="myCustomProduct">My Custom Product</key>


In the next part, we will create the tree nodes for our custom section, see you!


About the author

Vlael Samuel Layug

PHP Developer
.NET Developer
Umbraco Contributor

Hello. I'm a web developer who specializes in Backend for about 4 years+ and working towards being a Full Stack Developer and Umbraco MVP in the future.

In my free time, I play around with the Umbraco CMS codebase a lot and picking up for grabs in the issue tracker. For me, it's like hitting two birds in one stone. I learn a lot every day and from every pull request that is being merged, it's like my way of giving back to the community and saying thanks to the developers who are maintaining Umbraco.

My vision & fundamentals

I want to make this website that can help fellow Umbracians learn a lot and get jobs.
Also, I want to mention that I've been reading the Umbrajobs blogs before being an author and it helped me a lot! I want to say thanks to them and #H5YR

Follow me on social media

If you're an Umbraco professional, partner, employer, recruiter or a passionate Umbraco community builder then I'm more than happy to hear from you. Follow me on my social media channels and please reach out if you have any needs, want help or consultation with anything Umbraco related or just want a general chat.

comments powered by Disqus

Blog Filter

How we can help?

Need help with an Umbraco project?

Need help with a project but not too sure who to approach? Send us your project brief and budget. We will provide a free consultation and can help you gather quotes from the best and most suitable freelancers or agencies.

Looking to hire an Umbraco Professional?

Have you got job vacancy and want to hire an Umbraco professional? Post a job on our website for free. Alternatively let us know your requirements and we will send suitable prospects your way.

Claim your free profile!

Are you an Umbraco Freelance Developer or Umbraco partner that wants to advertise on our site? If you work with Umbraco or registered as an Umbraco partner then you can create a profile for free.

Let's build the Umbraco Community

We're big on building the Umbraco community and we think you guys are awesome! If there's anyway at all we can help then please reach out.