post template – adress templates

Hey,

I don’t now if I’m doing it right.

I have created the file Publii/themes/simple/post-TEMPLATE_SLUG.hbs with the content:

{
“name”: “displayAuthor”,
“label”: “Display author name”,
“value”: 1,
“type”: “select”,
“postTemplates”: “alternative”,
“options”: [
{
“label”: “Enabled”,
“value”: 1
},
{
“label”: “Disabled”,
“value”: 0
}
]
}

added this file to Publii/themes/simple/config.json.

When I now want to create a post from my template, I don’t can choose one. I create a new post and want to choose one under the other options, but it says Post template not available in your theme.

Does it matter on which point I insert the value in the config.json file?

Thanks

Hey Mikkaell: don’t give up! Deep breaths. 🙂

Things might seem a bit frustrating when you’re first starting with Publii and customizing it beyond the default settings, but I promise you, once you understand this, you’ll be able to understand and create other custom elements for your site.

I created custom post templates for my own site a few months ago, so I’ll walk you through what I did (and if you’ve already moved on to another platform, hopefully this will help someone else):

1. Create a Theme Override Folder

Since you are making changes to the theme’s folders, you’ll want to create a folder where all the modified files live, rather than directly editing your theme’s files. This isn’t mandatory, but it ensures that your changes aren’t lost in case you have to upgrade the base theme again, and it makes it easier to track and go back on your changes.

To read more about this, you can read this article, but essentially you’ll want to do the following:

Go to your Publii directory on your computer, and navigate to the following folder: Publii\sites\name-of-your-site\input\themes.

• You can find your Publii directory by click on the three dots in the Publii app on the top-right, clicking on “App Settings”, and scrolling down to “Files Location” > “Sites Location”

In this folder, you’ll find a folder that has the name of your theme. Create a new folder that has the name of your theme and “-override”. For example, if your theme folder is called “simple”, name the new folder “simple-override”

Now you can override any file from the original theme folder by copy pasting the file from the original theme folder (“simple”) into the override folder (“simple-override”).

That said, if you are copying a file that’s located within another folder in the original theme folder, you’ll have to recreate this directory in the new theme override folder.

• For example: “if we wanted to override the main.css file, which is in the themeName\assets\css folder, then we’d need to create an assets folder in our themeName-override directory, then create a css directory within that, and finally, create a copy of the main.css file in the css folder.” (more on that here)

Okay, on to the fun stuff:

2. Create a .hbs file for your template

Go in the original theme folder: Publii\sites\name-of-your-site\input\themes\simple and copy the file “post.hbs”.

Now go into your override folder: Publii\sites\name-of-your-site\input\themes\simple-override and paste the “post.hbs” file you just copied.

Rename this file by keeping the “post”, adding a dash, and adding the name of your new template. For example, you could rename it “post-restaurant_foo.hbs”. Just don’t name it “post-default” because that’s used already (read more on that here).

3. Add an entry in the config file for your new template(s)

Go in the original theme folder: Publii\sites\name-of-your-site\input\themes\simple and copy the file “config.json”.

Now go into your override folder: Publii\sites\name-of-your-site\input\themes\simple-override and paste the “config.json” file you just copied.

Open the file in your code editor of your choice (I love using Visual Studio Code, but you could use Brackets, Atom, Notepad, whatever). Scroll to or use search function to find the section of this file that says “postTemplates” and add info on your new template:

"postTemplates": {
  "TEMPLATE_SLUG": "Human readable template name"
}

If we use the earlier example with “post-restaurant_foo.hbs”, it would look like this:

"postTemplates": {
  "restaurant_foo": "Restaurant Foo Template"
}

Save the config.json file.

You should now be able to find your new templates listed in your Post Editor settings.

4. Edit your new post template

Let’s go back and edit the new post template file.

Go into your override folder: Publii\sites\name-of-your-site\input\themes\simple-override and open the new template file that was made earlier in the code editor of your choice. If we follow the example again, it would be “post-restaurant_foo.hbs”. I typically open .hbs files in Notepad because for some reason, VS Code messes them up.

• .hbs means that it’s a Handlebars file. When you open this file, you’ll see that a lot of the code looks like HTML, and might contain tags with {{double curly brackets}} and {{{triple curly brackets}}} and {{> things like this}}. These are Handlebars tags, partials, and helpers that just tell Publii to swap these out with other info. For now, I assume you won’t have to worry about those for what you’re looking to do. If in doubt, though, consult the documentation or ask.

Now, I assume that you know your way around HTML, so you can make any changes that need to be made from the default template in here. Add your map, other info, etc. and then save the file.

You can preview your modifications by going into the Post Editor, making a mock post, selecting the new template, and clicking on “Preview”. Then, go back to your template file and continue editing until it looks like you want it to.

5. Repeat as needed

I assume that the other restaurant template files will be nearly identical to the first new one, so I would recommend duplicating the new template file for however many locations you need, renaming them respectively, logging them into the config file, and editing them separately to your taste.

Anyway, I hope this helps! I wrote a lot because I don’t know what your proficiency is with these different technologies. If you need any more help, don’t hesitate to reach out in this forum, and look at the dev documentation.

I also highly recommend the following videos and tutorials to learn more about Publii customization:

• This tutorial series on how the user created a custom theme
• Publii Post tags
• Publii playlist from start to deployment