# Capitalize a title

**URL:** <https://discourse.gohugo.io/t/capitalize-a-title/19518>\
**Category:** tips & tricks\
**Created:** [July 7, 2019, 1:32pm UTC](https://discourse.gohugo.io/t/capitalize-a-title/19518 "2019-07-07T13:32:42Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [July 7, 2019, 1:32pm UTC](https://discourse.gohugo.io/t/capitalize-a-title/19518/1 "2019-07-07T13:32:42Z")

</div>

I was searching for a way to capitalize a title so that each word in the title starts with an uppercase character. This has been asked before, but I did not find a solution, just some passive agressive bug reports, hehe. ([https://github.com/gohugoio/hugo/issues/2455](https://github.com/gohugoio/hugo/issues/2455))

Now: Hugo has `upper` which changes ALL characters into uppercase and `humanize` which changes the first character in a string (amidst other things) to upper case.

Which actually makes what I want to do quite easy.

Let’s assume I have a taxonomy “dwayne johnson” and I want the title of the taxonomy page to be “Dwayne Johnson”. What I do is split the string at the spaces into splices and then range “humanizing” over them:

```auto
{{ $name := split .Page.Title " " }}
{{ range $name }}
  {{ . | humanize }}
{{ end }}

```

You might want to use “headline capitalization” that changes strings like “weather in thailand” into “Weather in Thailand”. This could be done with a “stop word list”:

```auto
{{ $name := split .Page.Title " " }}
{{ range $name }}
  {{ if in "the and or in" . }}
    {{ . }}
  {{ else }}
    {{ . | humanize }}
  {{ end }}
{{ end }}

```

The problem here is, that you need to create your own stopword list for the language you are using. But it’s enough for me. Maybe it’s of use for someone.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [July 7, 2019, 1:57pm UTC](https://discourse.gohugo.io/t/capitalize-a-title/19518/2 "2019-07-07T13:57:04Z")

</div>

The default archetype is

```
title: "{{ replace .Name "-" " " | title }}"

```

So does `title` not do what you want?

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [July 7, 2019, 2:49pm UTC](https://discourse.gohugo.io/t/capitalize-a-title/19518/3 "2019-07-07T14:49:44Z")

</div>

> [@zwbetz](#):
>
> So does `title` not do what you want?

Woops. For some reasons I oversaw `title`. It does exactly what I want.

(mumble… the function docs really need a secondary structure that sorts them into string functions, array functions, conditional functions, and so one… mumble…)

---

<div class="post-metadata">

**Author:** ![lpar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/lpar/32/5465_2.png) [@lpar](https://discourse.gohugo.io/u/lpar)\
**Post date:** [July 10, 2019, 1:21am UTC](https://discourse.gohugo.io/t/capitalize-a-title/19518/4 "2019-07-10T01:21:50Z")

</div>

Personally I’d do it in CSS.

> **[text-transform | CSS-Tricks](https://css-tricks.com/almanac/properties/t/text-transform/)**
>
> The text-transform property in CSS controls text case and capitalization. .lowercase { text-transform: lowercase; } Text-Transform Values lowercase makes

---

<div class="post-metadata">

**Author:** ![maiki](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maiki/32/16384_2.png) [@maiki](https://discourse.gohugo.io/u/maiki)\
**Post date:** [July 10, 2019, 2:42am UTC](https://discourse.gohugo.io/t/capitalize-a-title/19518/5 "2019-07-10T02:42:13Z")

</div>

> [@lpar](#):
>
> Personally I’d do it in CSS.

Okay, I’ll bite. Why?

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [July 10, 2019, 3:07am UTC](https://discourse.gohugo.io/t/capitalize-a-title/19518/6 "2019-07-10T03:07:34Z")

</div>

Am curious as well. Because even if you use

```
text-transform: capitalize;

```

It doesn’t give you title case.

---

<div class="post-metadata">

**Author:** ![lpar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/lpar/32/5465_2.png) [@lpar](https://discourse.gohugo.io/u/lpar)\
**Post date:** [July 10, 2019, 1:10pm UTC](https://discourse.gohugo.io/t/capitalize-a-title/19518/7 "2019-07-10T13:10:42Z")

</div>

Well, `text-transform: capitalize;` [seems to](https://codepen.io/mariemosley/pen/0f4293fce0d14aafc3818c950ab0ded3/) give me what was asked for:

> I was searching for a way to capitalize a title so that each word in the title starts with an uppercase character.

As to why I’d do it in CSS, various reasons.

Firstly, so that I can keep the data in its natural format and not do additional computation while rendering pages.

Secondly, so that I can easily have the style be different in different contexts. e.g. I might want to capitalize titles in a search engine drop-down box, but not when they’re displayed as headlines on the page, even though the underlying JSON is the same.

Thirdly, for ease of changing it later. I deal with corporate style guidelines where one year you’re expected to use capitalized, the next year it’s back to sentence case.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [July 10, 2019, 1:28pm UTC](https://discourse.gohugo.io/t/capitalize-a-title/19518/8 "2019-07-10T13:28:08Z")

</div>

> **[Configure Hugo](https://gohugo.io/getting-started/configuration/#configure-title-case)**
>
> How to configure your Hugo site.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [July 10, 2019, 1:43pm UTC](https://discourse.gohugo.io/t/capitalize-a-title/19518/9 "2019-07-10T13:43:59Z")

</div>

Fair enough @lpar. Even though “capitalize first letter of each word” and “title case” are slightly different 🙂

@bep TIL about that config option

---

<div class="post-metadata">

**Author:** ![jhvanderschee](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jhvanderschee/32/18241_2.png) [@jhvanderschee](https://discourse.gohugo.io/u/jhvanderschee)\
**Post date:** [February 25, 2023, 1:09pm UTC](https://discourse.gohugo.io/t/capitalize-a-title/19518/10 "2023-02-25T13:09:38Z")

</div>

The solution is `strings.FirstUpper`: [strings.FirstUpper | Hugo](https://gohugo.io/functions/strings.firstupper/)