Category: typing feature

UPDATE: I have decided to remove the two typing features from the links below. I decided that I had too many typing features on my site. You should also note that the latest version of this plugin requires version 2.0.15. So you would want to download the latest script:

wp_enqueue_script( 'bb-typed-core', esc_url('https://unpkg.com/[email protected]/dist/typed.umd.js'), array(), true );

This article is a follow up to my original article about how to add a typing feature. I’ll discuss the new ways I add a typing feature on my homepage and my themes page. You can still download the core plugin from my github page.

Download my plugin from my github repository. Unzip it, then open the file until you find the file named big-typing-effect (all lower case). If the file name has been post fixed with anything such as “-main”, then you should delete it so that it just reads “big-typing-effect”. Go into your WordPress file directory and add the big-typing-effect folder into your plugins folder (wordpress > wp-content > plugins). Then go into your WordPress admin center (Plugins > Installed Plugins) and activate the plugin.

This implementation is distinct from my original post and the ReadMe instructions because it no longer relies on breaks. Instead it relies on minimum height. This should make it easier to implement and update.

The typing feature inside the cover block on my themes page was comparatively simple to implement. This is the custom HTML for the text on my themes page:

<p class="has-text-align-left has-white-color has-text-color has-x-large-font-size bb-coverType">The Big Themes series are designed for <span class="bb-text-slider-items">beginners., learners., developers., everyone!</span><strong class="bb-text-slider" style="font-weight:normal;"></strong></p>

I also set the minimum height of the cover block to 600 using the block editor. This was necessary so that the screen height didn’t adjust on mobile.

I also added the following additional CSS to complement the image:

.bb-coverType {
	max-width: 400px !important;
}

However, you may decide that your cover block doesn’t need it.

Adding a typing feature to a media and text block is a bit more tricky. You will probably have to experiment with different minimum heights based on your content. This site’s homepage is implemented using the following custom HTML:

<p>The Big Themes Series can be used to create a website for a <span class="bb-text-slider-items">blog., restaurant., nonprofit., band., bar., portfolio., business., gym., park.</span><strong class="bb-text-slider" style="font-weight:normal;"></strong></p>

And it relies on the following additonal CSS:

/*These first two are necessary because it is custom html.*/
@media screen and (min-width: 600px) {
.bb-four-images-text .wp-block-media-text .wp-block-media-text__content {
		padding-right: 20px;
	}
}
/*You could also adjust this in the html inline*/
.bb-four-images-text .wp-block-media-text p {
	font-size: 24px  !important;
}

/* These last two keep the screen size from adjusting when the typing runs over onto a second line.  You will likely have to experiment and adjust based on your content. */
@media screen and (max-width: 1000px) {
	.bb-four-images-text .wp-block-media-text .wp-block-media-text__content p {
	min-height: 120px;
}
}
@media screen and (max-width: 375px) {
	.bb-four-images-text .wp-block-media-text .wp-block-media-text__content p {
	min-height: 150px;
}
}

If you have any questions, then feel free to post them in the comments section.

UPDATE: I have decided to remove the two typing feature from the link below. I decided that I had too many typing features on my site. You should also note that the latest version of this plugin requires version 2.0.15. So you would want to download the latest script:

There are a few different plugins available if you want to add a typing feature like the one at the top of the themes page to your WordPress site. But when you get down to brass tacks, a typing plugin doesn’t actually have to do very much. Type.js is open source software that does the heavy lifting of making the typing action happen. JSDelivr provides a fast and easy way to add Typed.js to your site. And WordPress already provides all of the interface necessary to design the output. All your plugin needs to do is synchronize the existing software.

Downloading My Plugin

Download my plugin from my github repository. Unzip it, then open the file until you find the file named big-typing-effect (all lower case). If the file name has been post fixed with anything such as “-main”, then you should delete it so that it just reads “big-typing-effect”. Go into your WordPress file directory and add the big-typing-effect folder into your plugins folder (wordpress > wp-content > plugins). Then go into your WordPress admin center (Plugins > Installed Plugins) and activate the plugin.

Now all you have to do is follow the instructions in the readme file.

If you have any questions, then feel free to post them in the comments section.

Why I haven’t tried to publish this to WordPress.org yet

It’s time peel back the mystique of plugins. A useful plugin doesn’t need to be more than a few files with a few lines each. The reason most people don’t realize this is they rarely see simple plugins. Simple plugins often aren’t worth being published into a commercial setting. A simple plugin rarely needs to be updated. But a commercial plugin is expected to be updated with every new version of WordPress, even when there is nothing to update. This can make hosting a simple plugin in a commercial venue an unnecessarily complicated venture.

Bearing all of this in mind, I may try to publish this plugin or some other version of it to WordPress.org in the future if I decide it is worth dealing with all of the overhead. But fortunately, you can download it from GitHub right now.