Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
Web Dev + WordPress + Security

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..

Hey: After testing, don’t forget to uncheck the “Disable cache” button in your code inspector, to re-enable the browser cache. Or leave it disabled if you want, your call. As a developer, I leave the browser cache disabled in my work browser.

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.

FYI: Prismatic is used for the syntax highlighted code snippets in this article.

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 :)

Jeff Starr
About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
The Tao of WordPress: Master the art of WordPress.

One response to “WP 6.0 Fix Error: QTags is not defined”

  1. Thank you very much this fixed my issues with WP 6.0.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
.htaccess made easy: Improve site performance and security.
Thoughts
The Legend of Zelda: Tears of the Kingdom coming May 12, 2023. Absolutely pumped.
Favorite thing for breakfast is a tall glass of cold water. Hits the spot every time.
Fall is my favorite season :)
Still a few days left before “Unlimited” pro licenses are no longer available.
Getting back into it after a nice mini vacation. Time to ramp up and get busy.
Enjoy my 7-year hand-curated collection of free online tools for web dev and design.
Weapons required to rule the world: the weather, common cold, plenty of idiots.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.