Genesis Tutorials

Animated Typed Text

Typed.js is a Javascript library you can install in any WordPress theme. It enables you to generate typed text/html within any existing div or simply by hooking in a new div using genesis hooks.

You can also use jQuery to install & customize typed settings.

In this tutorial, i’ll provide everything you need to install typed.js in 3 simple steps.

Firstly, here’s a gif showing you what the code in this tutorial produces:


The demo shows you how the code generates a typing/typewriter effect for text or HTML.

The code also enables you to:

  • Modify/customize the typed settings so you can change the speed at which text/html is typed.
  • Style the HTML output so you can add a background image, style the font size, color and all other elements.
  • Easily swap out the background image with your own.
  • Load the typed script on any pages conditionally or within 1 page template only.
  • Output typed in a text widget using HTML, using PHP code in a widget area or hooking in the typed container div using any WordPress or Genesis hook

Tested using the Centric Pro child theme by StudioPress. Works in any Genesis child or WordPress theme.

Code Installation

There’s only 3 simple steps to install and use typed in your theme.

Step 1 : After downloading the zip folder below, simply upload the folder named typed to your child theme folder.

Related Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *