WP 6.0 Fix Error: QTags is not defined

“Quick” post about an error that may occur with WordPress 6.0 (and possibly other versions). After updating to WordPress 6, the JavaScript Errors Notifier extension was showing a “QTags is not defined” error on sites where custom Quicktags are configured (via plugins or custom scripts). Because of the error, custom Quicktags were broken and not added to the editor toolbar. This quick post explains why the error is happening and how to fix it (easily).

Is your site affected?

An easy way to keep an eye on JavaScript errors is to use the free JavaScript Errors Notifier addon, which shows you right on the page if there are any errors. If there are any errors, the addon will display a small red exclamation point icon in the corner of the page. Click on that to get information about the JavaScript errors on the page.

Alternately, you can use the code inspector in your browser. Here are the steps:

• Visit any “Edit Post” screen in the WP Admin Area
• Crack open your browser’s code inspector
• Visit the “Network” tab and check the box to “Disable cache”
• Visit the “Console” tab and reload the page

The console will show you any errors on the page. The one we’re concerned with here is the “Qtags missing” error, which looks something like this:

Uncaught ReferenceError: QTags is not defined at post.php:2264:3

The line number (2264) and character number (3) will vary depending on the scripts in play. Point is, if you find that error, it means that WordPress Quicktags are broken on site. Any custom buttons that should be displayed in the toolbar will be missing.

Fortunately there is a simple explanation and solution for this 1 weird bug..

Why the error is happening

To understand why the “QTags is not defined” error happens, let’s walk thru a basic example. In my free syntax-highlighting plugin Prismatic, a custom pre button is added to the quicktag toolbar:

QTags.addButton('prismatic_pre', 'pre', '<pre><code class="language-">', '</code></pre>', 'z', 'Preformatted Code');

That’s standard stuff based on the Quicktags API, and was working great before WP 6.0, no issues just happy camping. Then in WP 6.0, suddenly started throwing the “QTags is not defined” error. So the code above trying to add a button using QTags.addButton is not working.

So what happened in WordPress 6.0?

Turns out the reason for the error is due to deprioritized loading of the quicktags script, quicktags.min.js. In WordPress 6 and beyond, the script is loaded a bit later than in previous versions. In previous WordPress versions, the script was loaded earlier on the page, so when calling QTags.addButton to add a button, QTags is defined and the button is added (as expected). FYI: the script is located at:

/wp-includes/js/quicktags.min.js

In WordPress version 6.0, the quicktags script is loaded later on the page, after the Prismatic call to QTags.addButton. Hence the “QTags is not defined” error.

The solution

To resolve the issue, make sure your script runs after page load. That gives the quicktags.min.js script a chance to load. So when you call QTags.addButton to add some buttons, the quicktags script will be loaded and QTags will be defined.

To illustrate, let’s return to the Prismatic example:

QTags.addButton('prismatic_pre', 'pre', '<pre><code class="language-">', '</code></pre>', 'z', 'Preformatted Code');

..to fix the “QTags is not defined” error, we wrap the above code in a window.onload function to make sure that all scripts (including quicktags.min.js) are loaded before calling QTags.addButton. The new revised code looks like this:

window.onload = function() {
	QTags.addButton('prismatic_pre', 'pre', '<pre><code class="language-">', '</code></pre>', 'z', 'Preformatted Code');
};

And done. This change will be implemented in the next version of Prismatic. Very quick and easy fix.

Of course, there are other (probably better) ways to ensure that the add-button function is called after the page is fully loaded. For example, when enqueuing your script, declare quicktags.js as a dependency like so:

wp_enqueue_script('my-qtag-script', get_template_directory_uri() .'/js/add-buttons.js', array('quicktags'), '1.0');

Notice the third parameter where we specify array('quicktags'). That tells WordPress to load the add-buttons script after quicktags.js. Learn more about wp_enqueue_script() at WordPress.org.

Update: Yet another solution is to use wp_script_is(), like so:

if (wp_script_is('quicktags')) {
	QTags.addButton('prismatic_pre', 'pre', '<pre><code class="language-">', '</code></pre>', 'z', 'Preformatted Code');
}

Either way, happy scripting :)

About the Author

Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.