WordPress Integration Guide

📦 Method 1: Using functions.php (Recommended)

Step 1: Upload Files

Step 2: Add to functions.php

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

🌐 Method 2: Using CDN

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 Plugin File

<?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

🎨 Customization for WordPress

Change Widget Position

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

Match WordPress Theme Colors

/* 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

Conflicts with Other Plugins

Child Theme Compatibility

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

📝 Best Practices

🎯 Next Steps

🆘 Need Help?