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 IdentitySite 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.

The letter loading animation from Timber

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';
}
  1. 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:

Animation letter changed to “b”

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.

Updated on January 31, 2022

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at hello@pixelgrade.com and we will give you a helping hand.