How to change the loading animation letter

The loading animation from Timber takes the first letter of your site’s title (added in Appearance – Customize – Site Identity – Site Title) and displays it in lowercase as a logo animation.

For example, in the case of Timber, since the site title is “Timber,” it will display a lower case “t” in the animation.

However, there are times when you might want to change the letter without changing your site’s title. Read the instruction below to learn how to make it happen.

Changing the loading animation letter

Here’s what you need to do to achieve this:

1. Make sure you have the Timber Child theme installed. This ensures that any code edits you do will not be removed when you update Timber.
2. From your WordPress dashboard, navigate to Appeareance → Theme File Editor → make sure the Timber Child is selected.
3. Click on the functions.php option in the right panel → scroll to the bottom of the file and paste the code below.

function timber_first_site_title_character() {
    return 'B';
}

4. Change the B letter to the one you want to display → click on Update file to save your changes.

Here’s how it will look in the end:

Changing the letter to uppercase

If you want the letter to be uppercase, you need to add the code below in Appearance → Customize → Additional CSS.

#loaderSvg text#letter {
    text-transform: uppercase;
}

Publish the changes and that’s it.