Tutorials & Examples

Find out how to use CoolText, both via javascript & html, following the tutorials on these pages.

Using CoolText in Wordpress

What follows is a simple description of how you can use CoolText in Wordpress. There are many ways to do this, this is just a starting point.

1. Create an Animations Pack

Create an animations pack using the create_pack.html file included into the zip. The entire animations pack is approximately 210kb, so it would be better to extract from it only the animations you need to use. Let's imagine that this file is called mypack.js

2. Copy

Copy mypack.js and cooltext.min.js into the js folder of your theme (for example /wp-content/themes/theme-name/js/)

3. Include the libraries

Open the header.php file (it's in the theme root folder, for ezample /wp-content/themes/theme-name/) and put the following lines into the head tags:

Now you can use cooltext both via html or javascript

4. Use CoolText via html

Place the text you want to animate inside a page and use the CoolText attributes as described in the Using CoolText via html tutorial. Here's an example:

5. Use CoolText via javascript

If you prefer to fire CoolText via javascript you have to copy what follows inside the head tag:

and the following html inside your page:

Running Wordpress?

Check out our CoolText Wordpress Plugin