TypeIt for WordPress
This is the documentation is for TypeIt's official WordPress plugin. Install the plugin and easily generate typing animations via shortcode or Gutenberg block.
Use plugin in an open source or personal project for free. For commercial projects, the following licenses are available. A single license will cover use of this plugin, as well as TypeItJS itself.
The following are required to run this plugin. In addition, keep in mind TypeIt's browser requirements.
- WordPress v5.4.1
- PHP v7.2
- Download the plugin and upload to your plugins directory, or install the plugin through the WordPress plugins page. As a premium plugin, WP TypeIt is only available for upload as a
.zipfile. You cannot install it through the WordPress Plugin Directory.
- Activate the plugin on the 'Plugins' page. After doing so, it should look something like this:
There are two ways to create an effect with WP TypeIt -- a shortcode or Gutenberg block.
To create an animation with the shortcode, open up any post or page, and paste some variation of the following using the "shortcode" block:
You can set an attribute on the shortcode for each basic option accepted by TypeIt. For example, to set the speed of the animation, specify a
<h2>[typeit strings="Look, I'm typing a string!" speed="500"]</h2>
Or to make it continuously loop, use
<h2>[typeit strings="This is a string that will loop!" speed="100" loop="true"]</h2>
By default, a
<span> tag will be used to house the animation, but you set your own by passing an
[typeit strings="This will be in an H1." element="h1"]
If, for some reason, you don't want to set strigs via the
elements attribute, you can place strings directly inside the shortcode itself.
[typeit speed="300"]This string will exist in your HTML, and when the page is loaded, TypeIt will take over and animate it.[/typeit]
You may also create an animation using the Gutenberg block, which let's you more easily fine-tune an animation by adding individual strings, deleting characters, pausing, and more.
To do so, add a block and search for "TypeIt":
After selecting the block, you'll be ready to create your animation. The block will allow you choose an element to contain the animation, as well as different actions to queue for the effect. Currently, you can choose from "type", "delete", "move", "break", "pause", and "empty." For more information on what these actions do, see here. After creating your actions, you can rearrange them by dragging them to a desired order.
To update the plugin, navigate to the plugins page in the WP admin and check if an update message is shown. If so, click the appropriate link to download the latest version of the plugin.
- Initial release.
- Improve documentation.
- Add unit testing for increased code reliability.
- Fix bug causing camel-cased shortcode attributes to work improperly.
- Improve code structure.
- Make code more easily hookable for developers.
- Introduce Gutenberg block.
- Add support for the
elementattribute in a shortcode.