Learn     Article Tutorials

Guide to custom article templates

Available to the Grandmaster subscription tier and above. Upgrade here.

 

Custom article templates are very useful if your world has many articles with a similar structure that doesn't quite fit one of the default templates. For example, if you're creating an article for every single country, you might want all of them to look similar. With a custom article template, you can change the layout and default content of articles.

 

Please note that this feature will not let you create new text fields! To add custom sidebar fields, check this how-to.

 

Creating and editing templates

To access the custom article templates interface:

 
  1. In the top menu bar, click on "Studio", then select "Article Templates".
  2. On the right panel, give the custom template a title. For the parent template title, choose the default template you want to base yours on.
  3. Click "Create Template" to get started!
 

 

If you already have a custom template, you'll see it in that page too. Click the Edit button to edit it.

 

Basic set-up

When editing a custom template, there are four tabs available at the top. In the "Structure" tab you can add default content to each section of the template.

 

 

For example, if you're creating a custom template for a character in an intrigue-heavy setting, you might want an "Loyalty" section at the very top of the article. To do that, simply add a header ([h1]Loyalty[/h1]) in the "Vignette/free form" field. To add custom fields in the side panel, use the regular side panel field BBCode.

 

Essentially, this section lets you add default content to all articles created with this template. It can be headers, images, embeds like diplomacy webs and maps, and even custom CSS containers to have a more advanced layout. You can also add default tags to all articles by using the "tags" field at the bottom.

 

Editing the template details

In the "Presentation" tab, you can edit the details of the template:

 
  • Name: this is the name of your custom template (for example, "Villain" or "Magic item").
  • Icon: this icon will be used to represent the custom template. By default, it's a fire icon, but you can change it to any other FontAwesome or RPG-Awesome icon.
  • Description: this will be displayed as a description of the template. It's for your eyes only.
  • Parent template type: you can change your custom template's base here.
 

CSS

In the CSS tab, you have a couple of options:

 
  • CSS class: this will be added as a CSS class to all articles created with this template, so you can target them from the world CSS.
  • Display CSS: CSS here will be applied to articles you create with this custom template.
 

When you create a new article, the CSS you set up in the custom template will be copied over to that article's individual CSS, so any existing articles will not be affected by updates to this field.

 

Note that CSS is an advanced feature and we can't provide help with CSS itself. The community Codex and the #css-help channel in our Discord server are good places to get help.

 

Advanced options

This is a technical advanced feature that involves coding with HTML and TWIG. This section will only explain how the feature is integrated into World Anvil, not how HTML and TWIG work.

 

Using HTML and TWIG, you can use this section to change the structure of the article. This will let you define the order in which the default fields appear. To get started:

 
  1. Find the "Download" button on the right. This will get you a ZIP field with the code of all of the default World Anvil templates.
  2. The files are in .twig format, which you can open with any text editor. Locate the file for the parent template of your custom one, and copy its contents.
  3. Paste everything in the HTML structure field.
 

Then, edit the layout at your heart's content! Note that, since you're dealing with the code that renders the template, syntax errors in the HTML or TWIG could make articles created with the template not display properly.

 

We can't offer help with TWIG or HTML, but you can join our Discord server and use the #twig-help channel to get help!

Do you have any feedback about this article? Email us at [email protected]!