Skip to main content

CMS Integration

OpenKeyNav can be integrated into various Content Management Systems (CMS) to enhance keyboard accessibility. This guide provides a general approach to integrating OpenKeyNav with popular CMS platforms such as WordPress and Joomla.

WordPress Integration​

Step 1: Enqueue the OpenKeyNav Script​

To include the OpenKeyNav library in your WordPress site, you need to enqueue the script in your 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​

To include the OpenKeyNav library in your Joomla site, add the script to your 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.

By following these steps, you can enhance the keyboard accessibility of your CMS-managed website, providing a better user experience for all visitors.