Templates

Templates are MediaWiki features used on many wikis, including Fandom wikis like the Coding Help Wiki. They contain text, and often HTML & CSS code too, that gets embedded on other pages. They are similar to functions in programming. Many of them let you customize them using parameters.

Templates have many uses. From {{See also}} to {{PicList}}, they help you organize information and display content. Templates can be utilitarian, or they can be fun like badges and userboxes.

Templates can be used on pages, like article pages and user pages. However, they can't be used in message walls.

Using templates

You can add templates to user and article pages. This works in both the visual editor and source mode.

Visual editor

1. Edit the page where you want to put the template.
2. Go to the top menu where the text features are and choose the "INSERT" dropdown. Choose the first option, "Template."
3. A dialog box will appear with a search bar. Paste or start typing the template's name, e.g. PicList for the PicList template. Once you see it appear, click it.
4. If the template has any parameters, you'll be prompted to enter the info there.
5. Once you're done, insert it.

If you decide to edit your template parameters later, you can. Just click the template and there will be an "edit" button to re-open the dialog box.

Source mode

1. Type {{Template Name}}, putting in the name of your chosen template instead of "Template Name." For example, if you want to use the "See also" template, type: {{See also}}
2. If you want to specify parameters, add them. The layout is {{Template Name|parameter1=value1|parameter2=value2}}.
   • It can help to open the template's page in another tab or window to see the list of parameters.
3. Make sure to preview the template to see how it works.

For example, let's say you want to use the PicList template to make a heart and the words "I love templates!" According to the template page, your first image goes in the "col1pic1" parameter and your first line of text goes in the "col1text1" parameter. So you'd write the code like this:

{{PicList|col1pic1=Icon Heart Pink LR24.png|col1text1=I love templates!}}

And the output would be this:

	I love templates!

You can also use line breaks if you want it to be easier to read. Sometimes, people put line breaks before each | symbol. It doesn't change the output, but it can make it easier for you to re-read and edit your code. For example:

{{PicList
|col1pic1=Icon Heart Pink LR24.png
|col1text1=I love templates!
}}

The line breaks make it easier to keep track of the parameters you're entering. This can be handy if you are using a lot of parameters.

Making templates

Making templates can be easy or complicated, depending on how detailed you want to get. You can involve basic features like parameters, intermediate features like parser functions, and advanced features like Lua. This page covers the basics.

1. Make a new page in the Template namespace. The name would look like Template:Example (changing "Example" to whatever you'd like the template to be named)
2. Edit it in source mode.
3. Add some example text. For example, <div>This is my first template!</div>
4. Add noinclude tags, <noinclude></noinclude>. These tags will hold things that you'd like people to see when they visit the template page, but don't want to include when people use the template. For example, categories and instructions on how to use the template go here.
   • A category, like [[Category:Templates]] or one of its subcategories
   • Info, instructions, or tips for people who want to use the template in the future

You might end up with code that looks something like this:

<div style="padding: 10px;">This is my first template!</div><noinclude>
==About==
I made this!
[[Category:Templates]]
</noinclude>

Adding parameters

Main article: Template parameters

Template parameters let people customize the template whenever they use it. For example, perhaps you'd like users to be able to add a personal message or modify CSS styles. You can do this with parameters.

Parameters are enclosed by 3 curly braces. Usually, we put a | symbol after a parameter's name. For example, {{{myParameter|}}}. The | is a a logical OR. When we include the |, it means "if this field is left blank, don't put anything there."

For example, let's imagine you want to let people add a message after the words "This is my first template!" You can make a parameter named "message" and put it in:

<div style="padding: 10px;">This is my first template! {{{message|}}}</div><noinclude>
==About==
I made this!
[[Category:Templates]]
</noinclude>

Then when people use the template and fill out a message, it'll go where the {{{message|}}} parameter is. You can also add CSS controls for people to modify the CSS. For example, let's say we want them to be able to control background color and text color. We can add two new parameters and name them "bgColor" and "textColor."

<div style="padding: 10px; background-color: {{{bgColor|}}}; color: {{{textColor|}}};">This is my first template! {{{message|}}}</div><noinclude>
==About==
I made this!
[[Category:Templates]]
</noinclude>

Now, whenever users use this template, they can specify bgColor, textColor, and the message. If they don't specify anything, the values will be left blank. You can also specify default values by putting your desired defaults for a variable between the | and the }}}. For example, maybe you'd like the background color to be MistyRose by default and the text color to be MidnightBlue by default. Here's how that would look:

<div style="padding: 10px; background-color: {{{bgColor|MistyRose}}}; color: {{{textColor|MidnightBlue}}};">This is my first template! {{{message|}}}</div><noinclude>
==About==
I made this!
[[Category:Templates]]
</noinclude>

Adding template data for parameters

Main article: Template data

Template data makes it easier for users to use your templates in the visual editor. Here's how to add it:

1. Look up above the toolbar and below the page names. You'll see an "Edit Template Data" button. Click it.
2. A dialog box appears. It'll let you add a template description and parameters. One button says "Add suggested parameters." Click it.
3. Click on each parameter's name (e.g. "bgColor"). You can add info for it, including:
   • Label: Specify a nicely-formatted version of the name (e.g. "Background color")
   • Description: Describe what the parameter does (e.g. "Controls the box's background color. The default is MistyRose")
   • Example: Give an example or two of valid input (e.g. "white, #aabbcc")
   • Status: Say if it's optional, deprecated, required, or suggested. "Suggested" is often the best choice.
   • Other options, like suggested values and data type
4. Apply the changes and add template data for your other parameters too.
5. When you're done adding info, click "Apply." Template data will populate inside the noinclude tags of your template. You can go back and edit this anytime.

Do your best to be clear and helpful when you add template data. This can make a big difference in user experience for people who use your template. Try to make it as helpful and easy to use as you can!

Tips and tricks

Making templates is a skill you improve with templates. Here are some tips from people who have learned from experience.

General

If you add a lot of line breaks in your template code, those line breaks may appear randomly when people use the code. They can add unwanted gaps. But if you want line breaks in your code for readability, you can comment them out with HTML comments. For example:

<div style="display: grid; grid-template-columns: 50% 50%; grid-gap: 10px; {{{containerStyles|}}}"><!-- Line breaks commented out so they don't appear in unexpected places
--><div style="{{{column1Styles|}}}">{{{column1|Please enter content for column 1.}}}</div><!--
--><div style="{{{column2Styles|}}}">{{{column2|Please enter content for column 2.}}}</div><!--
--></div><noinclude>

The "Line breaks commented out so they don't appear in unexpected places" message lets other editors know that these comments are here for an important reason.

Some other tips:

• Give your parameters clear names. For example, {{{textColor|}}} is better than {{{c|}}}. Then it's easier for people to understand your code.
• Don't indent your code the way HTML developers usually do. In WikiText, an indented line can be turned into preformatted text. This means that <pre></pre> tags may be applied to your code where you didn't expect them.

Testing tips

Here are some things that can help as you develop and test your template code:

• Hit "Preview" often to check how your template looks. That way, if something breaks, it's easier to figure out what went wrong, because you only changed a few things since you last looked at it.
• Put an example usage of your template right inside the noinclude tags. Enter demo values for your parameters. That way, whenever you preview, an example is right there. This can help you debug and imagine what it looks like with different parameter values.

Best practices

Always remember accessibility and readability when you make and use templates. Ask yourself questions like:

• How readable is the text? If I'm changing the text color, have I set a background color that contrasts well? (Remember that gradient and image backgrounds don't always render, so you need a fallback background color.)
• Are the colors calm or too intense?
• How cluttered is it?
• If my template includes text, is it clear and easy to read? Could a young person understand it?

Aim to make your templates pleasant and helpful.

See also

• Accessibility
• Badge Tutorial
• Collapsibles
• Template data
• Template parameters
• Userboxes

External links

• Templates Wiki, which features many free templates