PHPackages ayecode/wp-ayecode-settings-framework - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. ayecode/wp-ayecode-settings-framework ActiveLibrary[Framework](/categories/framework) ayecode/wp-ayecode-settings-framework ===================================== Modern WordPress settings framework with Alpine.js and Bootstrap 5 3.0.1-beta(1mo ago)02↓100%2GPL-3.0-or-laterJavaScriptPHP >=7.4 Since Apr 7Pushed 2w agoCompare [ Source](https://github.com/AyeCode/wp-ayecode-settings-framework)[ Packagist](https://packagist.org/packages/ayecode/wp-ayecode-settings-framework)[ Docs](https://github.com/AyeCode/wp-ayecode-settings-framework)[ RSS](/packages/ayecode-wp-ayecode-settings-framework/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (3)Used By (0) AyeCode Settings Framework ========================== [](#ayecode-settings-framework) A modern WordPress settings framework with Alpine.js and Bootstrap 5, designed for creating beautiful, responsive admin interfaces with minimal code. Features -------- [](#features) - 🎨 **Modern UI** - Clean, responsive interface using Bootstrap 5 - ⚑ **Alpine.js Powered** - Reactive UI without complex build steps - πŸ” **Smart Search** - Find and edit settings instantly - πŸ“± **Mobile Responsive** - Works perfectly on all devices - πŸŽ›οΈ **Rich Field Types** - Text, toggles, colors, selects, and more - πŸ”˜ **Action Buttons** - AJAX buttons with confirmation dialogs and progress tracking - ♻️ **Built-in Reset** - One-line reset to defaults functionality - πŸ”’ **Secure** - Built-in validation and sanitization - 🌐 **Translation Ready** - Full i18n support - πŸš€ **Performance** - Lightweight and fast Installation ------------ [](#installation) Install via Composer: ``` composer require ayecode//wp-ayecode-settings-framework/ ``` Quick Start ----------- [](#quick-start) ### 1. Create Configuration Array [](#1-create-configuration-array) ``` $config = array( 'sections' => array( array( 'id' => 'general', 'name' => 'General Settings', 'icon' => 'fa-solid fa-gear', 'fields' => array( array( 'id' => 'site_title', 'type' => 'text', 'label' => 'Site Title', 'description' => 'Enter your site title', 'default' => 'My Awesome Site' ), array( 'id' => 'enable_feature', 'type' => 'toggle', 'label' => 'Enable Cool Feature', 'description' => 'Turn on the cool feature', 'default' => true ) ) ) ) ); ``` ### 2. Initialize Framework [](#2-initialize-framework) ``` use AyeCode\SettingsFramework\Settings_Framework; // Initialize the framework new Settings_Framework($config, 'my_plugin_settings', array( 'plugin_name' => 'My Awesome Plugin', 'menu_title' => 'Plugin Settings', 'page_title' => 'My Plugin Settings' )); ``` ### 3. Access Settings [](#3-access-settings) ``` // Get all settings $settings = get_option('my_plugin_settings', array()); // Get specific setting $site_title = $settings['site_title'] ?? 'Default Title'; ``` Field Types ----------- [](#field-types) ### Text Fields [](#text-fields) ``` array( 'id' => 'username', 'type' => 'text', 'label' => 'Username', 'placeholder' => 'Enter username...', 'required' => true ) ``` ### Toggle Switches [](#toggle-switches) ``` array( 'id' => 'enable_notifications', 'type' => 'toggle', 'label' => 'Enable Notifications', 'description' => 'Turn on email notifications', 'default' => false ) ``` ### Select Dropdowns [](#select-dropdowns) ``` array( 'id' => 'theme_style', 'type' => 'select', 'label' => 'Theme Style', 'options' => array( 'light' => 'Light Theme', 'dark' => 'Dark Theme', 'auto' => 'Auto (System)' ), 'default' => 'light' ) ``` ### Color Pickers [](#color-pickers) ``` array( 'id' => 'brand_color', 'type' => 'color', 'label' => 'Brand Color', 'default' => '#0073aa' ) ``` ### Number Fields [](#number-fields) ``` array( 'id' => 'max_items', 'type' => 'number', 'label' => 'Maximum Items', 'min' => 1, 'max' => 100, 'step' => 1, 'default' => 10 ) ``` Sections with Subsections ------------------------- [](#sections-with-subsections) ``` array( 'id' => 'advanced', 'name' => 'Advanced Settings', 'icon' => 'fa-solid fa-tools', 'subsections' => array( array( 'id' => 'performance', 'name' => 'Performance', 'icon' => 'fa-solid fa-tachometer-alt', 'fields' => array( // Performance fields here ) ), array( 'id' => 'security', 'name' => 'Security', 'icon' => 'fa-solid fa-shield-alt', 'fields' => array( // Security fields here ) ) ) ) ``` Search Functionality -------------------- [](#search-functionality) Add searchable terms to fields for better discovery: ``` array( 'id' => 'google_maps_api_key', 'type' => 'password', 'label' => 'Google Maps API Key', 'searchable' => array('google', 'maps', 'api', 'key', 'geolocation') ) ``` Validation ---------- [](#validation) ### Built-in Validation [](#built-in-validation) ``` array( 'id' => 'email_address', 'type' => 'email', 'label' => 'Email Address', 'required' => true ) ``` ### Custom Validation [](#custom-validation) ``` array( 'id' => 'custom_field', 'type' => 'text', 'label' => 'Custom Field', 'validate_callback' => 'my_custom_validator' ) function my_custom_validator($value, $field) { if (strlen($value) < 5) { return new WP_Error('too_short', 'Value must be at least 5 characters'); } return true; } ``` Addon Integration ----------------- [](#addon-integration) Your addons can inject settings into existing sections: ``` // In your addon add_filter('ayecode_settings_framework_sections', function($sections) { // Add new section $sections[] = array( 'id' => 'my_addon', 'name' => 'My Addon Settings', 'icon' => 'fa-solid fa-puzzle-piece', 'fields' => array( // Addon fields here ) ); return $sections; }); ``` Hooks & Filters ------------------- [](#hooks--filters) ### Actions [](#actions) ``` // After settings are saved add_action('ayecode_settings_framework_saved', function($settings, $option_name) { // Clear caches, trigger updates, etc. }, 10, 2); // After settings are reset add_action('ayecode_settings_framework_reset', function($option_name) { // Handle reset logic }); ``` ### Filters [](#filters) ``` // Modify sections before rendering add_filter('ayecode_settings_framework_sections', function($sections) { // Modify or add sections return $sections; }); ``` Styling ------- [](#styling) The framework uses Bootstrap 5 with minimal custom CSS. To customize: ``` /* Override framework colors */ :root { --asf-blue: #your-color; --asf-blue-dark: #your-dark-color; } /* Custom field styling */ .your-plugin .form-control { border-radius: 8px; } ``` JavaScript Integration ---------------------- [](#javascript-integration) Access the Alpine.js app: ``` // Listen for settings changes document.addEventListener('alpine:init', () => { Alpine.data('customExtension', () => ({ // Your custom Alpine.js data/methods })); }); ``` Requirements ------------ [](#requirements) - PHP 7.4+ - WordPress 5.0+ - Modern browser with JavaScript enabled Browser Support --------------- [](#browser-support) - Chrome 90+ - Firefox 88+ - Safari 14+ - Edge 90+ Contributing ------------ [](#contributing) 1. Fork the repository 2. Create a feature branch 3. Make your changes 4. Add tests if needed 5. Submit a pull request License ------- [](#license) GPL-3.0-or-later Support ------- [](#support) - [GitHub Issues](https://github.com/AyeCode//wp-ayecode-settings-framework//issues) - [Documentation](https://ayecode.io//wp-ayecode-settings-framework/-docs) - [Community Support](https://ayecode.io/support) --- πŸ› οΈ Building Assets with Vite ---------------------------- [](#️-building-assets-with-vite) This plugin uses [Vite](https://vitejs.dev/) to bundle and optimize its JavaScript. We build in **IIFE format** so the output can be safely enqueued in WordPress without requiring a module loader. ### πŸ“¦ Prerequisites [](#-prerequisites) - Node.js (LTS version recommended, e.g. 20.x) - npm or yarn ### πŸ”§ Setup [](#-setup) ``` # install dependencies npm install ``` ### πŸš€ Development [](#-development) ``` npm run dev ``` - Vite will serve unminified builds. - Update `vite.config.js β†’ server.origin` if you need a different dev URL. ### πŸ—οΈ Production Build [](#️-production-build) Build optimized assets into `assets/dist`: ``` npm run build ``` - Output JS is placed under `assets/dist/js/` - Filenames follow the entry name (`settings.js`, `admin-keys.js`, etc). - A `manifest.json` is generated in `assets/dist/` for PHP to resolve correct asset paths. ### πŸ“‚ Entry Points [](#-entry-points) Each entry corresponds to a separate admin screen: - `settings.js` β†’ Settings Framework (Alpine.js app) - `admin-keys.js` β†’ API Keys admin page You can add more entries in `vite.config.js β†’ build.rollupOptions.input`. ### βš™οΈ Notes [](#️-notes) - **Alpine.js is external** β€” it’s enqueued separately in WordPress, not bundled. - Output is an **IIFE** (immediately-invoked function expression) for WP compatibility. - Static assets (images, fonts, etc.) are handled by WordPress enqueueing, not via Vite’s `public/` folder. Made with ❀️ by [AyeCode Ltd](https://ayecode.io) ### Health Score 32 β€” LowBetter than 72% of packages Maintenance95 Actively maintained with recent releases Popularity5 Limited adoption so far Community7 Small or concentrated contributor base Maturity20 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits β€” single point of failure How is this calculated?**Maintenance (25%)** β€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** β€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** β€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** β€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 2 Last Release 32d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/ff958eb5f50496b1011617ffffe149ab32b1e3f4e0f08434bca428421f22a609?d=identicon)[AyeCode](/maintainers/AyeCode) --- Top Contributors [![Stiofan](https://avatars.githubusercontent.com/u/10433311?v=4)](https://github.com/Stiofan "Stiofan (81 commits)") --- Tags frameworkwordpressconfigurationSettingsbootstrapadminalpinejs ### Embed Badge ![Health badge](/badges/ayecode-wp-ayecode-settings-framework/health.svg) ``` [![Health](https://phpackages.com/badges/ayecode-wp-ayecode-settings-framework/health.svg)](https://phpackages.com/packages/ayecode-wp-ayecode-settings-framework) ``` ### Alternatives [redux-framework/redux-framework Build better and beautiful sites in WordPress, faster. 1.8k6.2k](/packages/redux-framework-redux-framework)[krzysiekpiasecki/gentelella A Symfony skeleton application with user account functionality based on the Twitter Bootstrap and Gentelella template 991.8k](/packages/krzysiekpiasecki-gentelella)[tyxla/carbon-breadcrumbs A basic WordPress plugin for breadcrumbs with advanced capabilities for extending. 195.2k](/packages/tyxla-carbon-breadcrumbs)[alleyinteractive/pest-plugin-wordpress WordPress Pest Integration 263.7k1](/packages/alleyinteractive-pest-plugin-wordpress) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)