How To Create a Typewriter Effect In WordPress

Do you want to create a typewriter effect in your WordPress blog? Well, there are two best ways to do it. Today, I’ll enable you to learn how you can create a typewriter effect in your WordPress website.

Methods of Typewriter Effect

You have two ways available to create a typewriter effect. The first method is using JavaScript, while the second way is using a plugin. It is up to you to decide between the two methods. Keep in mind that the typewriter effect adds an awesome look and feel to your website design. Visit our homepage to check the typewriter effect.

Typewriter Effect Using JavaScript

I’m sure you are aware of Javascript and its uses. I will be creating a typewriter effect using one of the best available Javascript plugins created by a Texas-born developer named Matt Boldt. While several other plugins are serving the same functionality, Matt’s one is perfect for use.

If you have a paucity of time to read my entire article, here is a video tutorial worth watching for you.

Your first step will be downloading the plugin either from GitHub or download the main file from our server. We decided to host it on our privately owned server as there are many folders involved and help beginners like you avoid confusion in finding your required file.

Download Main File

After downloading the file, open it, and you will see a file named ‘Typed.min.’ This is a minified version of the plugin.

You have to upload this file into your themes folder. If your theme doesn’t have one, then create one.

After successful uploading, you have to enqueue this script. You can do so by pasting the below code into your themes functions.php file.

add_action( 'wp_enqueue_scripts', 'wg_typed_script' );
function wg_typed_script() {
wp_enqueue_script( 'typed_js', get_template_directory_uri() . '/js/typed.min.js', array( 'jquery' ), true );
wp_enqueue_script( 'typed_js', get_template_directory_uri() . '/js/example.js', array( 'jquery' ), true );
}

Now you are ready to use the typewriter effect. Also, I am adding another file, which I will mention later.

Remember you; you need to create an HTML element to show the typewriter effect. For example,

<div class="type_effect">
<h2>We <span id="type"></span></h2>
</div>

Here I will target the span tag with id="type". I will use this id in JavaScript to create an effect on the right place.

When we enqueued the plugin, we enqueued other files named as example.js. You have to create this file in js a folder.

Now open the file example.js and enter this code.

 var typed = new Typed('#type', {
strings: ['Change <b>!deas</b>', 'Create WordPress <b>Themes</b>', 'Create WordPress <b>Plugins</b>', 'Do Lots Of <b>Stuff</b>'],
typeSpeed: 100,
backSpeed: 100,
backDelay: 1000,
startDelay: 1000,
loop: true,
});

As you may have noted that I targeted the id="type", I talked about earlier.

Now save the file and check it.

There are many things in the above code which I will discuss now.

• Strings: String is an argument passed to the Typed Object. You can put the words here, of which you want to create a typewriter effect as I have added four sentences each in single-quoted commas. When the typing effect of the first sentence is completed, the next one will be created.
• typeSpeed: This is the speed of the typing effect. For example, how fast you want the text to be typed.
• backSpeed: This is the back speed of the typing effect, such as how fast you want the text to be backspaced.
• backDelay: backDelay means when the sentences will be completely typed, then after this time, the backspacing should start.
• startDelay: startDelay means when the typewriter effect should start. For example, say you have put the typing effect on the homepage, and you reloaded the page. When the page will be reloaded, how many seconds after you want the typing effect to start is what startDelay means.
• Loop: Loop means whether you want to repeat the sentences continuously. If set to false, The typing effect will run only once.

All this was the method of creating a typewriter effect using JavaScript. Now let’s create it using the plugin.

Typewriter Effect Using Plugin

If you don’t want to use the above method and don’t want to dirt your hands with code, you have the option of using a plugin.

The name of the plugin is Typed JS.

This plugin uses the same JavaScript plugin to create the effect. But the plugin is beginner-friendly, so I thought to add this plugin to my article.

You can grab a copy of the plugin from the WordPress plugin repository. Install it and activate it.

The plugin has many features like you can embed shortcode and create as many strings as you want.

The plugin offers the same options as startDelay, backDelay, etc. If you read the above method, using this plugin will be a great deal for you.

I hope this tutorial helped you in creating the typewriter effect on WordPress.

Please do share and comment. Also, don’t hesitate to ask for help if you are facing any problems.