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.