A Concise Tutorial Needed to Implement A Custom Content Type

I would like help on the following because despite all my struggles, I do not seem to be going anywhere.

I want to have a custom content type, say “event”. Each page of this type is to display info about a particular event I will be hosting. MD files of this type are to go under an “events” directory.

Event-type contents need to be rendered by a custom layout. Also, the section page that lists event-type pages must be tailoed as well. The biggest reason is that events need to be shown in the ascending order of the event date, not the content creation/modified/published date. I believe the event date needs to be specified in the “front matter” as the custom parameter.

Welcome to the Hugo community!

It is not a custom content type you want, that is for creating version of your content in another format, e.g. a rss feed or a json search index.

You want to create an event section and have a custom theme for that section.

First step is to simply create a new directory named event inside the content directory. This is where you will create all your event posts.

Step 2 is to create custom singel and list templates for events. Inside the layout directory you create a new event directory (create the layout directory if it does not exist). It must be named exactly as the section. So event → event or events → events. Then copy the default templates for single and list in to this new directory. You can now edit the copies so they suit your needs.

If you run in to problems please post a link to your repo so we can see and test your code.

1 Like

Thanks, @frjo for your prompt response. I appreciate it very much!

First of all, I apologize for my confusion on terminology. There are many similar words in Hugo’s terminology, e.g., “kind”, “type”, etc., and I willingly admit that I was very much confused. I’m afraid I still am.

Second, thanks for showing a clean way to implement a custom layout. I was specifying a layout type (e.g., “event”) and then implement an event.html layout, but yours is much cleaner.

1 Like