Skip to main content

CMS Integration

OpenKeyNav adds keyboard operation and navigation modes to CMS-managed websites. This guide shows the integration pattern for WordPress and Joomla.

WordPress Integration​

Step 1: Enqueue the OpenKeyNav Script​

Enqueue the OpenKeyNav script from the WordPress theme's functions.php file.

function enqueue_openkeynav_script() {
    wp_enqueue_script(
        'openkeynav',
        'https://cdn.jsdelivr.net/npm/openkeynav/dist/openkeynav.umd.min.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_openkeynav_script');

Step 2: Initialize OpenKeyNav​

Add the initialization script to your theme's footer.php file to ensure it runs after the page content has loaded.

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const openKeyNav = new OpenKeyNav();
        openKeyNav.init();
    });
</script>

Joomla Integration​

Step 1: Add the OpenKeyNav Script​

Add the OpenKeyNav script to the Joomla template's index.php file.

<!DOCTYPE html>
<html lang="en">
<head>
    <jdoc:include type="head" />
    <script src="https://cdn.jsdelivr.net/npm/openkeynav/dist/openkeynav.umd.min.js"></script>
</head>
<body>
    <jdoc:include type="message" />
    <jdoc:include type="component" />

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const openKeyNav = new OpenKeyNav();
            openKeyNav.init();
        });
    </script>
</body>
</html>

Summary​

Integrating OpenKeyNav with your CMS involves including the library script and initializing it after the page content has loaded. This guide covered the basic steps for integrating OpenKeyNav with WordPress and Joomla. For other CMS platforms, the process will be similar: include the script in your template or theme files and initialize OpenKeyNav when the DOM is fully loaded.

After initialization, verify Click Mode coverage across templates, plugins, dynamic components, dialogs, and authenticated states. Configure application-specific workflows and provide a visible way for users to discover the command layer.