Register Your Own Keyboard Shortcut In The Divi 5 Builder

Divi 5's Visual Builder will let you bind your own keyboard shortcuts. It is barely documented anywhere, so here is the whole thing: where the code goes, the twenty lines that do the work, and the three traps that will otherwise cost you an afternoon.

Where The Code Has To Live

Not in Theme Options, and this is the part that sends people in circles. That Integration box is for head and body markup on the front end. The Divi 5 builder runs in its own app window, and a script only loads in there if Divi has registered it as a package build. So this is a two-file plugin. There is no shorter version, and anything claiming otherwise is loading into the wrong window.

Make a folder at wp-content/plugins/divi-vb-shortcut/ and put these two files in it.

divi-vb-shortcut.php

<?php
/**
 * Plugin Name: Divi VB Shortcut
 * Description: Registers a keyboard shortcut in the Divi 5 Visual Builder.
 * Version: 1.0.0
 */

defined( 'ABSPATH' ) || exit;

use ET\Builder\VisualBuilder\Assets\PackageBuildManager;

add_action( 'divi_visual_builder_assets_before_enqueue_scripts', function () {

	if ( ! function_exists( 'et_builder_d5_enabled' ) || ! et_builder_d5_enabled() ) {
		return;
	}

	if ( ! et_core_is_fb_enabled() ) {
		return;
	}

	PackageBuildManager::register_package_build( [
		'name'    => 'divi-vb-shortcut',
		'version' => '1.0.0',
		'script'  => [
			'src'                => plugin_dir_url( __FILE__ ) . 'shortcut.js',
			'deps'               => [ 'divi-vendor-wp-hooks', 'divi-vendor-react', 'divi-module-library' ],
			'enqueue_top_window' => false,
			'enqueue_app_window' => true,
			'args'               => [ 'in_footer' => false ],
		],
	] );
} );

shortcut.js, in the same folder.

( function () {

	if ( window.__diviVbShortcutInit ) {
		return;
	}
	window.__diviVbShortcutInit = true;

	const wpHooks = window.vendor && window.vendor.wp && window.vendor.wp.hooks;

	if ( ! wpHooks ) {
		console.error( '[VB Shortcut] Divi dependencies missing, aborting.' );
		return;
	}

	wpHooks.addAction(
		'divi.visualBuilder.registerStores.after',
		'divi-vb-shortcut/register',
		function () {
			window.divi.keyboardShortcuts.registerShortcut( {
				name:     'diviVbShortcutDoThing',
				label:    'Do Thing',
				keys:     [ 'Meta', 'Alt', 's' ],
				category: 'modal',
				action:   function () {
					console.log( 'Shortcut fired' );
				},
			} );
		}
	);

}() );

Activate it, open any page in the Visual Builder, press Cmd+Alt+S, and watch the console. The registerStores.after action matters: register any earlier and there is nothing to register against. If you would rather not ship a plugin, the same PHP works from a child theme's functions.php with get_stylesheet_directory_uri() in place of plugin_dir_url( __FILE__ ).

Write Meta And Leave It

On anything that is not an Apple machine, Divi's own reducer adds a control alias for any combination you register with Meta. One line gets you Cmd+Alt+S on a Mac and Ctrl+Alt+S on Windows and Linux, and you never branch on platform. Register a second Control variant yourself and all you have built is a duplicate of a binding that already worked.

The Three Things That Waste An Afternoon

A duplicate name is thrown away in silence. Reuse a name that is already registered and Divi discards the whole registration and keeps the binding that was there first. So you change the keys, reload, nothing happens, change them again, and start doubting code that was correct three attempts ago. Use a fresh name while you are experimenting.

One bad dependency and the file never loads at all. WordPress will not register a handle whose dependencies do not exist, so a single wrong entry in that deps array means your script is never enqueued. No console error. Nothing in the network tab. The only clue is a "dependencies that are not registered" notice in debug.log, and if you have debug logging off you will find nothing at all. Those three handles are safe; do not guess at a fourth.

Some combinations are already taken. Matching is an exact set match on the sorted keys, so a three-key combination only ever fires on exactly those three and Ctrl+Alt+S can never collide with Divi's Ctrl+S save. But Cmd or Ctrl plus Alt plus C and the same with V are Divi's own. Check before you claim one.

Unregister What You Register

If the shortcut belongs to a modal or a panel rather than to the builder as a whole, call unregisterShortcut( 'diviVbShortcutDoThing' ) when that thing closes. Leave it registered and it keeps listening, shadowing whatever combination was underneath it, and the bug report you get will be about the shortcut it broke rather than the one you added.

Why This Is Worth Ten Minutes

On its own, one shortcut is a novelty. It stops being one the moment a plugin you built has a panel people open forty times a day, because the distance between a feature and a habit is usually a keystroke. The four categories Divi recognises are history, modal, module and page, and putting yours in the right one means it appears where a user already looks for it instead of in a menu they have to remember.

Checked against Divi 5.13.

← All posts