How to Add a Cool Typing Effect to Your WordPress Site

Content is the king, they say, but appearance is the queen. And that can’t be more true in the state of today’s web properties. Having an eye-catching design will help web owners grab the attention of their visitors. Aside from the well thought-out layout, harmonious color combination, and beautiful fonts, one of the ways that web owners can use to attain a visitor’s instant notice is to use moving, typewriter-like texts. If you are a WordPress user, you can achieve this effect easily using a plugin called Typed Js.

Note: since the effect is moving text, and it’s difficult to describe the “coolness” using either words or a static picture, I decided to use it in my personal website project, and you can see the result there.

Installing and Setting Up the Plugin

Installing a plugin in WordPress is very easy, especially for those who have tinkered with the platform for a while. All that you have to do is log in to your admin area and use the “Plugins -> Add New” menu from the left sidebar. Search for “Typed Js” from the plugin repository, then install and activate it.


Now you are ready to add a new Typed Js effect. The process is more or less similar to adding a new post. First, go to the “Typed -> Add New” menu from the left sidebar, then give your new Typed effect a name.

Important! Pay attention to the “Generated Shortcode.” It’s the string between the “[square brackets].” Copy everything including the brackets, and insert the shortcode anywhere you want it to appear. A different set of strings will have different shortcode.


From the “Typed Options” you can add the strings of words/phrases/sentences that you want to appear using the order that you prefer. Use the “Plus (+)” button to add a new string and “Minus (-)” button to delete an entry.


Below the strings are the various settings to adjust the appearance of the effect. You can customize the Typing Speed, Start Delay, Back Speed, and Back Delay. All the numbers are in milliseconds. You can also set the strings to appear in a loop, show cursor, choose a character as the cursor, and make it blink.


Another thing that you can adjust is the display, such as the font and color.


And after you are done with all the settings, hit “Publish” or “Update.”


Using the Effect in Your WordPress

As mentioned earlier, to use the Typed effect you need to copy the shortcode and paste it where you want it to appear. For my website, I’m going to use it on the landing page that I generated using SiteOrigin Page Builder.

First, I create a new page via “Pages -> Add New.” Then I switch to the “Page Builder” tab, add a new “Row,” set it to one column, and add the “SiteOrigin Hero” widget inside the row.


Then I open the frame and edit the content the same way I do with the usual WordPress posts. I insert the shortcode that was generated in the previous post.


To complete the design, I add and customize a “button” that will link to the previously set up “Contact Me” page so that a visitor that needs my services can get in touch with me.


And here’s the final result. If you want to see an example of the effect in action real time, you can visit my site.


You can create as many Typed Js items as you want, then copy and paste the shortcodes and insert the effect anywhere within posts or pages. Although it would be very cool, you can’t use the effect in the title. I tried.

What do you think about Typed Js effect? Can you see yourself using it in your WordPress site(s)? Share your thoughts and opinion using the comments below.

Jeffry Thurana
Jeffry Thurana

Jeffry Thurana is a creative writer living in Indonesia. He helps other writers and freelancers to earn more from their crafts. He's on a quest of learning the art of storytelling, believing that how you tell a story is as important as the story itself. He is also an architect and a designer, and loves traveling and playing classical guitar.

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox