This page contains external links. Be mindful of where you click. We do our best to link to reliable, safe websites. Still, you're responsible for your own internet safety.

Variables are a common feature in many programming languages. Like variables in algebra, you can control their values. They can be useful for customization and keeping track of things.

Wiki users may work with template parameters and WikiText magic words. Both wiki admins and professional web developers may work with CSS and JavaScript variables.

Template parameters

Main article: Template parameters

Template parameters are a type of variable. We call them "parameters" instead of "variables," but the concept is basically the same.

Template parameters let you customize how a template looks. The template's creator and editors define the parameters. Then, when you use the template, you can customize it using those parameters.

Specifying parameters when using a template

Let's use the {{User loves music}} template as an example. (This is a userbox that people can put on their profile pages.) By default, it looks like this:

But maybe you want it to be a different color, like pink. The template's page tells us that it has a parameter named "color" that has six different built-in options. In the visual editor, you edit parameters in the dialog box that opens when you select a template. In source mode, you use a pipe (|) as a separator. Then you type the exact parameter name, an = sign, and the value you want. Here's how we make the color pink:

{{User loves music|color=Pink}}

And the result is this:

Some template parameters only work with certain input. (For example, the "color" parameter uses a #switch parser function to control color. You can learn about that in the parser functions article.) But others offer unlimited options. This template's page has a "type" parameter that lets you specify which type of music you like. For example, maybe you want to say that you love heavy metal.

{{User loves music|color=Pink|type=heavy metal}}

And we get this:

Editing parameters when coding a template

Now let's look at things from the other perspective: writing the code. How do you create parameters to let your users customize code?

A parameter is written as a value enclosed by 3 curly braces ({ and }). Usually, we put a pipe symbol (|) before the closing curly braces. Here's an example from our {{User loves music}} template:

This user loves {{{type|}}} music.

This is a variable in its simplest execution. (No parser functions or anything.) People can enter any word they want for the type and it'll display there.

What's with the pipe? It functions like a logical "OR". The computer reads this as "type OR nothing," since there is nothing after the pipe. That way, if someone doesn't add the "type" parameter when they use the template, it'll show nothing there. The sentence will just say, "This user loves music."

And what if you want to set a default value? You can do that too! For example, we used the "color" parameter earlier, and the default color was purple. When you peek at the code, it says:

|color={{{color|Purple}}}

(The {{User loves music}} calls an intermediary template, {{Userbox themed}}, which handles the color complexities. But the main point is that by writing "Purple" after the pipe, we've set the default color to be purple.)

Once your template has parameters, you can add template data to describe them.

WikiText Magic Words

MediaWiki wikis, including Fandom wikis, have a few built-in variables. These get wrapped in two curly braces, just like templates do. Here are a few variables and their current outputs:

• {{CURRENTYEAR}} = 2026
• {{CURRENTMONTH}} = 06
• {{CURRENTDAY}} = 22
• {{CURRENTDAYNAME}} = Monday
• {{CURRENTTIME}} = 15:23
• {{CURRENTHOUR}} = 15
• {{PAGENAME}} = Variables
• {{SITENAME}} = Coding Help Wiki

MediaWiki has a page listing more variables.^[1]

CSS Variables

CSS Variables are variables that are used in CSS. You can declare a variable, then use it in different places in the CSS file. This makes it easier to keep your style consistent and adjust things later.

CSS variables only work in areas where you have a CSS file available. Wiki admins can edit their Common.css. You can also do this in non-wiki projects.

Let's write a few variables.

:root {
    --lightColor: LightCyan;
    --darkColor: DarkGreen;
    --powerfulFont: 'Impact';
}

The :root selector makes the variables available for the whole CSS file.

You can call these in both your CSS file and in inline CSS.

Here's an example of using it in a CSS file:

.color-box: {
    padding: 1em;
    background-color: var(--lightColor);
    color: var(--darkColor);
}

Now anything with the "color-box" class will have a LightCyan background and DarkGreen text.

You can also use this in inline CSS:

<div style="color: var(--lightColor); background-color: var(--darkColor); font-family: var(--powerfulFont); padding: 15px;">
This text will be LightCyan, with a DarkGreen background and the font Impact.
</div>

Fandom wikis have certain CSS variables set, like --theme-link-color and --theme-accent-color. Some of these are chosen using Fandom's theme designer. You can take advantage of these to code designs that naturally match the wiki's style. Here's an example:

JavaScript Variables

In JavaScript, variables can do many things. This page provides a basic overview.

We usually declare variables in JavaScript using the "let" keyword. (Before JavaScript version ES6, the "var" keyword was used, but "let" is usually the better option.^[2][3])

For example, let's say a house has 3 dogs. We'll create a variable and call it "numberOfDogs." Here's how that goes:

let numberOfDogs = 3;

We can also create a variable to store some text in it. This is called a "string." A string gets wrapped in quotation marks. Here's an example:

let oldestDog = "Fido";

Editing variables

Remember the house with 3 dogs? Let's say they get another dog. We can change the variable's value to reflect this. Now, since we already created the variable earlier, we won't use the "let" keyword again. Instead, we write the variable's name and assign it a new value.

numberOfDogs = 4;

But what if we don't want to scroll back up and check how many dogs there were before? Remember, programmers are lazy: we like to make things easy. So instead, you can do this:

numberOfDogs = numberOfDogs + 1;

This changes the value of numberOfDogs to its old value (3) plus 1. Handy, right? And because programmers really are lazy, we have shorthands for that too:

numberOfDogs += 1; // Add the number 1 to numberOfDogs
numberOfDogs++;    // "++" means "add 1 to this number"

Programmers are always trying to make things easier. And that's beautiful.

Constants

You can also create constants. A constant is a value that can't be changed later on. For example:

const lunaBirthday = "November 15";

No matter what happens later in the code, "lunaBirthday" will always be "November 15." And this makes sense, since we don't have time machines and can't harass Luna's mom into having her baby earlier or later. This value stays the way it is.

See also

• Parser functions
• Template data
• Template parameters

Template examples

• ProfileTabsSub and ProfileTabs, by Cleverduck09
• WelcomebyCleverduck09 by Cleverduck09 (a few template parameters, no parser functions)

External links

• CSS Variables Example by Regina
• JavaScript Variables Example by Regina
• Oh noes! by Regina and Katze

References