Typed Text Widget Content Using jQuery

Typed.js enables you to use Javascript or jQuery to display typed text. You can also hard code the text within your script which you can do using this tutorial. However, rather than hardcode HTML or text within Javascript or jQuery, you can also use Javascript or jQuery to read existing HTML or text elements like content within a existing text widget.

In this tutorial, i’ll show you how to use jQuery to read existing content located inside a text widget. This allows users with JavaScript disabled, to read your content which wouldn’t be the case if you hard coded your text or HTML.

Firstly, here’s the demo video.

Demo Video

The video demo shows you how the jQuery types the h1 heading located within the home 1 widget area in the Centric Pro child theme by StudioPress.

Code Installation

There’s 3 steps:

Step 1 : After downloading the typed folder below, simply upload it to the root directory of your child theme folder.

Related Tutorials

• Typewriter Text Effect In Genesis
• Add Top Banner With Typewriter Text Before Genesis Header