WordPress Integration

WordPress Integration Guide

Learn how to integrate the Accessibility Widget (Web Plugin) into your WordPress site.

Note: This guide covers integrating the web plugin into WordPress. A dedicated WordPress plugin version is in development and will be available soon.

📦 Method 1: Using functions.php (Recommended)

This is the recommended method for WordPress themes.

Step 1: Upload Files

Upload these files to your WordPress theme directory:

• accessibility-plugin.js
• accessibility-plugin.css
• accessibility-config.js (optional)

Location: /wp-content/themes/your-theme-name/

Step 2: Add to functions.php

Add this code to your theme's functions.php file:

function add_accessibility_plugin() {
    // Enqueue Boxicons (required)
    wp_enqueue_style(
        'boxicons',
        'https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css',
        array(),
        '2.1.4'
    );
    
    // Enqueue plugin CSS
    wp_enqueue_style(
        'accessibility-plugin',
        get_template_directory_uri() . '/accessibility-plugin.css',
        array(),
        '1.0.0'
    );
    
    // Enqueue config (optional)
    wp_enqueue_script(
        'accessibility-config',
        get_template_directory_uri() . '/accessibility-config.js',
        array(),
        '1.0.0',
        false // Load in header
    );
    
    // Enqueue plugin JS (must be last)
    wp_enqueue_script(
        'accessibility-plugin',
        get_template_directory_uri() . '/accessibility-plugin.js',
        array(),
        '1.0.0',
        true // Load in footer
    );
}
add_action('wp_enqueue_scripts', 'add_accessibility_plugin');

Step 3: Verify

1. Clear WordPress cache (if using caching plugin)
2. Visit your website
3. Check that the widget appears

🌐 Method 2: Using CDN

If you prefer not to host the files, use the CDN version:

function add_accessibility_plugin() {
    // Enqueue Boxicons
    wp_enqueue_style(
        'boxicons',
        'https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css',
        array(),
        '2.1.4'
    );
    
    // Enqueue plugin CSS from CDN
    wp_enqueue_style(
        'accessibility-plugin',
        'https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.css',
        array(),
        null // CDN handles versioning
    );
    
    // Enqueue plugin JS from CDN (must be last)
    wp_enqueue_script(
        'accessibility-plugin',
        'https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.js',
        array(),
        null,
        true // Load in footer
    );
}
add_action('wp_enqueue_scripts', 'add_accessibility_plugin');

🔌 Method 3: Using a Plugin

Create a simple WordPress plugin to add the accessibility widget.

Create Plugin File

Create a new file: accessibility-widget-plugin.php

<?php
/**
 * Plugin Name: Accessibility Widget
 * Plugin URI: https://github.com/airforcerp/Website-Accessibility-Widget
 * Description: Adds accessibility features to your WordPress site
 * Version: 1.0.0
 * Author: AirforceRP
 * License: Free
 */

function accessibility_widget_enqueue() {
    // Enqueue Boxicons
    wp_enqueue_style(
        'boxicons',
        'https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css',
        array(),
        '2.1.4'
    );
    
    // Enqueue plugin CSS
    wp_enqueue_style(
        'accessibility-plugin',
        plugin_dir_url(__FILE__) . 'accessibility-plugin.css',
        array(),
        '1.0.0'
    );
    
    // Enqueue plugin JS
    wp_enqueue_script(
        'accessibility-plugin',
        plugin_dir_url(__FILE__) . 'accessibility-plugin.js',
        array(),
        '1.0.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'accessibility_widget_enqueue');

Install Plugin

1. Create folder: /wp-content/plugins/accessibility-widget/
2. Add the PHP file and plugin files to this folder
3. Activate the plugin in WordPress admin

🎨 Customization for WordPress

Change Widget Position

Edit accessibility-config.js:

var AccessibilityConfig = {
    position: 'bottom-left', // or 'bottom-right'
    // ... other settings
};

Match WordPress Theme Colors

Add custom CSS to your theme:

/* In your theme's style.css or custom CSS */
.accessibility-toggle-btn {
    background: #0073aa; /* WordPress blue */
}

.accessibility-panel-header {
    background: #0073aa;
}

🔧 Troubleshooting WordPress Issues

Widget Not Appearing

1. Clear Cache

   • Clear WordPress cache
   • Clear browser cache
   • Disable caching plugins temporarily

2. Check File Paths

   • Verify file paths in functions.php
   • Check that files exist in theme directory
   • Use get_template_directory_uri() for parent themes
   • Use get_stylesheet_directory_uri() for child themes

3. Check Script Loading

   • Ensure scripts load in correct order
   • Plugin JS must load last
   • Check browser console for errors

Conflicts with Other Plugins

1. Test with Default Theme

   • Switch to default WordPress theme
   • Test if widget appears
   • If yes, issue is theme-specific

2. Disable Other Plugins

   • Disable plugins one by one
   • Test after each disable
   • Find conflicting plugin

3. Check JavaScript Errors

   • Open browser console (F12)
   • Look for errors
   • Fix or report errors

Child Theme Compatibility

If using a child theme, use get_stylesheet_directory_uri():

wp_enqueue_style(
    'accessibility-plugin',
    get_stylesheet_directory_uri() . '/accessibility-plugin.css',
    array(),
    '1.0.0'
);

📝 Best Practices

1. Use CDN for Production

   • Better caching
   • Faster loading
   • Less server load

2. Version Control

   • Use specific versions in production
   • Test updates before deploying
   • Keep backups

3. Performance

   • Load scripts in footer
   • Use async/defer if needed
   • Minimize custom CSS

4. Testing

   • Test on staging site first
   • Test with different themes
   • Test with different plugins

🎯 Next Steps

• Customize Configuration
• Learn the API
• Troubleshooting Guide

🆘 Need Help?

• Check Troubleshooting guide
• Review FAQ
• Open issue on GitHub