How to Add KNav to Your WordPress Site

WordPress powers over 40% of the web, and adding KNav to your WordPress site gives visitors instant access to an AI-powered command palette with Cmd+K (or Ctrl+K). This guide covers multiple integration methods—from quick plugin-free solutions to proper WordPress-way implementations using hooks and child themes.

Prerequisites

Before you begin, make sure you have:

• A KNav account with a configured workspace
• Your KNav workspace slug (found in Settings → Embed Code)
• Access to your WordPress admin dashboard
• For developer methods: FTP/SFTP access or a code editor plugin

The KNav Embed Code

Your KNav embed code looks like this:

<script
    src="https://www.knav.app/embed.js"
    data-workspace="your-workspace-slug"
></script>

Replace your-workspace-slug with your actual workspace slug from the KNav dashboard.

Method 1: Using wp_enqueue_script (Recommended)

The WordPress-approved way to add scripts. This method uses wp_enqueue_script with proper dependencies and loading attributes.

Option A: Add to functions.php

Add this to your theme's functions.php (or preferably, your child theme's functions.php):

/**
 * Enqueue KNav command palette script
 */
function enqueue_knav_script() {
    wp_enqueue_script(
        'knav-embed',
        'https://www.knav.app/embed.js',
        array(), // No dependencies
        null,    // No version (uses cache headers from KNav CDN)
        array(
            'strategy' => 'defer',
            'in_footer' => true,
        )
    );

    // Add the data-workspace attribute
    wp_script_add_data( 'knav-embed', 'data-workspace', 'your-workspace-slug' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_knav_script' );

/**
 * Add custom attributes to the KNav script tag
 */
function add_knav_script_attributes( $tag, $handle, $src ) {
    if ( 'knav-embed' !== $handle ) {
        return $tag;
    }

    // Add the data-workspace attribute
    return str_replace(
        ' src=',
        ' data-workspace="your-workspace-slug" src=',
        $tag
    );
}
add_filter( 'script_loader_tag', 'add_knav_script_attributes', 10, 3 );

Replace your-workspace-slug with your actual workspace slug.

Option B: Using a Must-Use Plugin

For site-wide functionality that persists across theme changes, create a must-use plugin:

1. Connect to your site via FTP/SFTP
2. Navigate to /wp-content/mu-plugins/ (create the folder if it doesn't exist)
3. Create a file called knav-integration.php:

<?php
/**
 * Plugin Name: KNav Integration
 * Description: Adds KNav AI-powered command palette to the site
 * Version: 1.0.0
 * Author: Your Name
 */

// Prevent direct access
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

class KNav_Integration {

    /**
     * KNav workspace slug
     */
    private const WORKSPACE_SLUG = 'your-workspace-slug';

    /**
     * Initialize the integration
     */
    public function __construct() {
        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
        add_filter( 'script_loader_tag', array( $this, 'add_script_attributes' ), 10, 3 );
    }

    /**
     * Enqueue the KNav embed script
     */
    public function enqueue_scripts() {
        // Don't load in admin or for logged-in users (optional)
        // if ( is_admin() || is_user_logged_in() ) {
        //     return;
        // }

        wp_enqueue_script(
            'knav-embed',
            'https://www.knav.app/embed.js',
            array(),
            null,
            array(
                'strategy' => 'defer',
                'in_footer' => true,
            )
        );
    }

    /**
     * Add data-workspace attribute to script tag
     */
    public function add_script_attributes( $tag, $handle, $src ) {
        if ( 'knav-embed' !== $handle ) {
            return $tag;
        }

        return str_replace(
            ' src=',
            ' data-workspace="' . esc_attr( self::WORKSPACE_SLUG ) . '" src=',
            $tag
        );
    }
}

new KNav_Integration();

Must-use plugins load automatically and can't be deactivated from the admin panel—perfect for critical site functionality.

Method 2: Using wp_footer Hook (Quick & Simple)

A straightforward approach that outputs the script directly in the footer:

/**
 * Add KNav script to footer
 */
function add_knav_to_footer() {
    ?>
    <script
        src="https://www.knav.app/embed.js"
        data-workspace="your-workspace-slug"
        defer
    ></script>
    <?php
}
add_action( 'wp_footer', 'add_knav_to_footer', 99 );

The priority 99 ensures it loads after other footer scripts.

Method 3: Conditional Loading

Load KNav only on specific pages, post types, or for certain users:

/**
 * Conditionally load KNav based on context
 */
function enqueue_knav_conditionally() {
    // Only load on specific post types
    if ( ! is_singular( array( 'post', 'page', 'docs' ) ) ) {
        return;
    }

    // Or only load on pages with a specific template
    // if ( ! is_page_template( 'templates/documentation.php' ) ) {
    //     return;
    // }

    // Or exclude admin users
    // if ( current_user_can( 'manage_options' ) ) {
    //     return;
    // }

    wp_enqueue_script(
        'knav-embed',
        'https://www.knav.app/embed.js',
        array(),
        null,
        array(
            'strategy' => 'defer',
            'in_footer' => true,
        )
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_knav_conditionally' );

// Don't forget the attribute filter from Method 1
add_filter( 'script_loader_tag', 'add_knav_script_attributes', 10, 3 );

Method 4: Using a Plugin (Code Snippets)

If you prefer not to edit theme files, use the Code Snippets plugin:

1. Install and activate "Code Snippets" from the WordPress plugin directory
2. Go to Snippets → Add New
3. Give it a title like "KNav Integration"
4. Paste the code from Method 1 or Method 2
5. Set it to run on the frontend only
6. Save and activate the snippet

This approach keeps your code separate from your theme, making it portable and theme-update safe.

Method 5: Theme Header/Footer Settings

Many WordPress themes include built-in options for adding header and footer scripts:

1. Go to Appearance → Customize (or your theme's options panel)
2. Look for "Custom Code", "Header/Footer Scripts", or similar
3. Add the KNav script to the footer section:

<script
    src="https://www.knav.app/embed.js"
    data-workspace="your-workspace-slug"
    defer
></script>

Popular themes with this feature: Astra, GeneratePress, Kadence, OceanWP, and most theme frameworks.

Verifying the Installation

After adding the code, clear any caching plugins and visit your site:

1. Press Cmd+K (Mac) or Ctrl+K (Windows)
2. The KNav command palette should appear
3. Try searching for content you've added to your KNav workspace

Troubleshooting

Palette doesn't appear:

• Check browser console (F12) for JavaScript errors
• Verify your workspace slug is correct
• Clear your caching plugin (WP Super Cache, W3 Total Cache, LiteSpeed, etc.)
• Check if a security plugin is blocking external scripts

Script not loading:

// Debug: Check if script is enqueued
add_action( 'wp_footer', function() {
    if ( wp_script_is( 'knav-embed', 'enqueued' ) ) {
        error_log( 'KNav script is enqueued' );
    } else {
        error_log( 'KNav script is NOT enqueued' );
    }
}, 100 );

Conflicts with other Cmd+K shortcuts:

Some WordPress plugins (like search plugins) may also use Cmd+K. KNav is designed to work alongside most implementations, but if you experience conflicts, you may need to disable conflicting plugin shortcuts.

Performance Considerations

The KNav embed script is lightweight (~15KB gzipped) and loads with the defer attribute, meaning:

• It won't block page rendering
• It loads after HTML parsing completes
• The command palette UI only initializes when triggered

For maximum performance, consider:

// Add resource hints for faster loading
function add_knav_preconnect() {
    echo '<link rel="preconnect" href="https://www.knav.app" crossorigin>';
    echo '<link rel="dns-prefetch" href="https://www.knav.app">';
}
add_action( 'wp_head', 'add_knav_preconnect', 1 );

Advanced: Passing Dynamic Data

You can pass WordPress data to KNav using inline scripts:

function add_knav_context() {
    // Only if KNav is enqueued
    if ( ! wp_script_is( 'knav-embed', 'enqueued' ) ) {
        return;
    }

    $context = array(
        'postType' => get_post_type(),
        'pageTitle' => get_the_title(),
        'isLoggedIn' => is_user_logged_in(),
    );
    ?>
    <script>
        window.knavContext = <?php echo wp_json_encode( $context ); ?>;
    </script>
    <?php
}
add_action( 'wp_footer', 'add_knav_context', 5 );

Multisite Compatibility

For WordPress Multisite installations, the must-use plugin approach (Method 1, Option B) works network-wide. For per-site control:

// In your mu-plugin, check the blog ID
function enqueue_knav_multisite() {
    $enabled_sites = array( 1, 3, 5 ); // Blog IDs where KNav should load

    if ( ! in_array( get_current_blog_id(), $enabled_sites, true ) ) {
        return;
    }

    // Enqueue script...
}
add_action( 'wp_enqueue_scripts', 'enqueue_knav_multisite' );

What's Next?

Once KNav is installed, head to your KNav dashboard to:

• Add your WordPress pages and posts as content sources
• Upload documentation PDFs or connect external URLs
• Configure AI to answer questions about your content
• View analytics to see what visitors are searching for
• Customize the appearance to match your WordPress theme

Pro Tips for WordPress Sites

1. Index your blog posts: Add your /blog/ or posts archive URL to KNav's content sources
2. Add your docs: If you use a docs plugin, add those URLs too
3. WooCommerce: Add product pages for instant product search
4. bbPress/BuddyPress: Help users find community content faster

Need help? Reach out to us at support@knav.app or check our documentation.