Customization
Getting started? Wowchemy has a collection of beautiful templates for you to choose from.
Want to personalize the template? No problem, a Wowchemy template is fully customizable. In fact, you can change so many elements, it would be difficult to find the original template it was made from.
This page explains some common site customizations. You might also be interested in customizing the homepage.
Check out the Guides for more customization options such as getting your own domain name, adding analytics, and interacting with comments.
Table of Contents
Hide Published With Wowchemy
Want to hide or customize the Published with Wowchemy notice in the footer?
Please support the ❤️ OPEN SOURCE ❤️ movement and the significant effort that goes into improving and maintaining the free Wowchemy page building framework and its templates by ❤️ sponsoring ❤️.
The notice can be automatically removed whilst sponsoring on a relevant tier.
Website icon
Are you looking to customize the desktop and mobile icon (aka favicon) which appears in your site’s Progressive Web App (PWA) and web browser tab?
Save your icon as a square 512x512 pixel image named icon.png
and place the image in your root assets/images/
folder, creating the assets
and images
folders if they don’t already exist.
Color Themes
Wowchemy comes bundled with a variety of popular themes built-in including:

To choose a theme, set the theme
option in config/_default/params.yaml
.
Alternatively, you can create your own theme.
Fonts
Your theme comes with a font set to style your titles and text, but you may choose to override it by specifying one of the following built-in font sets or creating your own font set:
- Minimal (modern)
- Classic (original Academic v1 style)
- Rose (traditional serif)
- Mr Robot (futuristic)
- Native: use device fonts for maximum performance
To choose a font set, set the font
option in config/_default/params.yaml
.
Font Sizes
The font size can be changed all the way from extra small to extra large using the font_size
option in config/_default/params.yaml
.
Community Themes
In this section, we will curate themes submitted by users. To create your own theme and request it to be added to this section, follow these steps:
- Follow the guide to create a new theme
- Upload your theme file to a new Github repository
- Reach out to us with the repository link in the Contributing channel in the community Discord
Custom theme
Both the colour theme and font set can be customized.
To customize a color theme:
- Copy a color theme such as minimal.toml to
data/themes/my_theme.toml
at the root of your site, creating thedata/themes/
folders if they do not already exist. Note: avoid using spaces in filenames. - Adjust the colors within your theme file using HTML color codes
- Tell Wowchemy to use your new theme by setting
theme: my_theme
inconfig/_default/params.yaml
Custom font
To customize the font set:
- Copy a font set such as minimal.toml to
data/fonts/my_font_set.toml
at the root of your site, creating thedata/fonts/
folders if they do not already exist. Note: avoid using spaces in filenames. - Adjust the font family, choosing from the library of Google Fonts if you wish - refer to the Google Font guide below
- Tell Wowchemy to use your new font set by setting
font: my_font_set
inconfig/_default/params.yaml
To select a free web-font available from Google Fonts:
- Visit Google Fonts
- Click on each font you wish to use
- For each font, click + Select this style for each style you wish to use
- Click on the icon at the top right (View your selected families) to open the dialog box on the right
- Click on Embed
- Under <link>, copy the part of the URL starting from
family=
to&display=swap...
(not included) and paste it as thegoogle_fonts
option in your new font theme- For example, if Google gives you
<link href="https://fonts.googleapis.com/css2?family=B612+Mono&family=Open+Sans&display=swap" rel="stylesheet">
, setgoogle_fonts = "family=B612+Mono&family=Open+Sans"
- For example, if Google gives you
- Under CSS rules to specify families in Google Font’s dialog, copy the font name and paste it as one of the fonts in your font theme
- For example, given
font-family: 'B612 Mono', monospace;
, copyB612 Mono
- For example, given
Change font size
You can modify the font size all the way from extra-small to extra large using the font_size
option in config/_default/params.yaml
.
Choose from XS (extra small), S (small), M (medium), L (large - DEFAULT), and XL (extra large).
Share your theme
If you create your own theme, consider giving it a unique name and sharing your new theme or font set with the community or following the guide below so that it can be considered for curation.
Custom footer
Add your own message to the footer of a site using the copyright
text field in config/_default/config.yaml
.
Optionally, you can choose a Creative Commons copyright license in config/_default/params.yaml
:
copyright_license:
enable: false
allow_derivatives: false
share_alike: true
allow_commercial: false
notice: >-
Except as otherwise noted, this work is licensed under {license}, and code
samples are licensed under the MIT License.
A copyright_license
can also be displayed on a per page basis by adding the option directly to a page’s front matter.
Date Format
Hugo uses the following constants to format dates and times:
Type | Options |
---|---|
Year | 06 2006 |
Month | 01 1 Jan January |
Day | 02 2 _2 (width two, right justified) |
Weekday | Mon Monday |
Hours | 03 3 15 |
Minutes | 04 4 |
Seconds | 05 5 |
AM/PM | PM pm |
Timezone | MST |
Offset | -0700 -07 -07:00 Z0700 Z07:00 |
To modify the format, edit date_format
and time_format
in config/_default/params.yaml
using the above constants. For example, some common formats are:
Format | Type |
---|---|
January 2, 2006 | Date |
01/02/06 | |
Jan-02-06 | |
Mon, 02 Jan 2006 | |
Monday, 02 Jan 2006 | |
15:04 | Time |
3:04 PM | |
15:04 MST |