Work faster and get better results by blocking distracting websites while you work »

How to turn Hugo text into lowercase with the lower function?

Situation: You want to know how Hugo’s lower function can help turn each character in a string to its lowercase version.

Discussion: make text lowercase with lower

The lower function turns all characters in a given string into lowercase characters. This function has the following syntax (Hugo Docs, 2017):

lower "sourceString"
"sourceString" | lower

lower needs just one parameter: a string of text we want to turn into lowercase. That string can be a literal string (such as lower "Hello There!"). It can also be a string variable, like lower .Title. The function can also handle literal numerical values (like lower 10.032), but triggers an error when we use an unquoted string – lower Example Text is not allowed.

When we execute lower we can place the function before its string parameter (lower "Hello"). Or we use the pipe symbol (|) to place it after a string expression ("Hello" | lower). This latter approach makes it possible to chain Hugo operations. That works because the value of the expression to the left of | becomes the input for the expression to the right of |. But regardless of how we execute lower, its behaviour and outcome remain the same.

The lower function has the following characteristics:

There’s currently no way to determine whether a string is in uppercase, lowercase, or mixed-case. That makes passing a string through the lower function the only way to know for sure that all characters are lowercase.

Create lowercased text: examples of Hugo’s lower function

A basic example of the lower function is:

<h2>{{ lower .Title }}</h2>

Here we create the <h2> heading element with the page’s title (.Title). We turn that whole title into lowercase text with lower. When our page’s title is “Review: Adele’s stunning ‘25’”, this template code prints the following on the static page:

<h2>review: adele's stunning '25'</h2>

We can also standardise with lower. That way text always appears with the same casing, regardless of how we entered it. Say our tags should always show in lowercase. We could enforce this by always typing in tags in small letters. Or we simply make all tags lowercase before we output them:

{{ if isset .Params "tags" }}
    <p>{{ delimit .Params.tags ", " ", and " | lower }}</p>
{{ end }}

The if statement uses the isset function to see whether the page has the ‘tags’ front matter variable set. This way we don’t get an error message caused by accessing something that isn’t there. When isset returns true (and says tags are present), code inside this if statement runs.

That template code makes a paragraph element. To prettify tags we use the delimit function. This function takes a collection (in this case, a list of tags) and turns it into a string with certain separators. Here we use comma’s (", ") between tags, and have delimit place the phrase ", and " between the last two tags.

To lowercase the string of text that delimit makes we chain its output with the pipe symbol (|) onto the lower function. With |, the outcome of the operation on the left of | is fed into the operation on the right. For this template code that means the string delimit makes is run through the lower function. Then when that latter function makes the string lowercase, we don’t take further actions and have Hugo output it to our static page.

The output of this template code looks like:

<p>pop, reviews, and albums</p>

Learn more

References (2017, December 21). Hugo package strings. Retrieved on January 17, 2018, from

Hugo Docs (2017, September 13). lower. Retrieved on February 2, 2018, from

Wikipedia (2018, January 18). Unicode. Retrieved on January 16, 2018, from