{"id":44493901,"url":"https://github.com/kallookoo/wp-color-picker-alpha","last_synced_at":"2026-02-13T04:59:03.022Z","repository":{"id":25880664,"uuid":"29320964","full_name":"kallookoo/wp-color-picker-alpha","owner":"kallookoo","description":"Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker","archived":false,"fork":false,"pushed_at":"2025-03-13T15:32:20.000Z","size":277,"stargazers_count":131,"open_issues_count":0,"forks_count":89,"subscribers_count":15,"default_branch":"main","last_synced_at":"2026-01-14T10:11:23.159Z","etag":null,"topics":["mode-rgba","wordpress","wp-color-picker"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kallookoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["kallookoo"],"custom":["https://www.paypal.me/kallookoo"]}},"created_at":"2015-01-15T22:16:13.000Z","updated_at":"2025-07-23T06:34:24.000Z","dependencies_parsed_at":"2024-05-28T22:24:01.708Z","dependency_job_id":"274ecd9b-a16d-468a-849e-a0560e721d91","html_url":"https://github.com/kallookoo/wp-color-picker-alpha","commit_stats":null,"previous_names":["23r9i0/wp-color-picker-alpha"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kallookoo/wp-color-picker-alpha","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kallookoo%2Fwp-color-picker-alpha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kallookoo%2Fwp-color-picker-alpha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kallookoo%2Fwp-color-picker-alpha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kallookoo%2Fwp-color-picker-alpha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kallookoo","download_url":"https://codeload.github.com/kallookoo/wp-color-picker-alpha/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kallookoo%2Fwp-color-picker-alpha/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29396847,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T04:26:15.637Z","status":"ssl_error","status_checked_at":"2026-02-13T04:16:29.732Z","response_time":78,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mode-rgba","wordpress","wp-color-picker"],"created_at":"2026-02-13T04:59:02.322Z","updated_at":"2026-02-13T04:59:03.011Z","avatar_url":"https://github.com/kallookoo.png","language":"JavaScript","funding_links":["https://github.com/sponsors/kallookoo","https://www.paypal.me/kallookoo"],"categories":[],"sub_categories":[],"readme":"[![Minify](https://github.com/kallookoo/wp-color-picker-alpha/actions/workflows/minify.yml/badge.svg?branch=main)](https://github.com/kallookoo/wp-color-picker-alpha/actions/workflows/minify.yml)\r\n\r\n# WordPress Color Picker Alpha\r\n\r\n* Overwrite [Automattic Iris][1] for enabled Alpha Channel in wpColorPicker\r\n* Overwrite [WordPress Color Picker][4] for better implementation of overwriting the Iris\r\n\r\n## Usage\r\n\r\n1. **Download and Copy Script**: Download the script and copy it into the `js` folder of your theme options or plugin.\r\n\r\n2. **Enqueue Styles and Scripts**: Add the following code to enqueue the necessary styles and scripts in your theme or plugin:\r\n\r\n    ```php\r\n    // Enqueue the default WordPress color picker style\r\n    wp_enqueue_style( 'wp-color-picker' );\r\n\r\n    /**\r\n     * URL to the minified wp-color-picker-alpha script.\r\n     *\r\n     * Example for use in a theme:\r\n     * `$url_to_script = get_template_directory_uri() . '/assets/js/wp-color-picker-alpha.min.js';`\r\n     * Example for use in a plugin:\r\n     * `$url_to_script = plugin_dir_url( __FILE__ ) . 'assets/js/wp-color-picker-alpha.min.js';`\r\n     *\r\n     * @var string $url_to_script\r\n     */\r\n    $url_to_script = '';\r\n\r\n    /**\r\n     * Whether to load the script in the footer.\r\n     *\r\n     * @link https://developer.wordpress.org/reference/functions/wp_register_script/#usage\r\n     *\r\n     * @since 6.8.0\r\n     *\r\n     * @var array|bool $args\r\n     */\r\n    $args = array(\r\n      'strategy'  =\u003e 'defer',\r\n      'in_footer' =\u003e true,\r\n    );\r\n\r\n    /**\r\n     * Register the wp-color-picker-alpha script\r\n     *\r\n     * @link https://developer.wordpress.org/reference/functions/wp_register_script/\r\n     */\r\n    wp_register_script( 'wp-color-picker-alpha', $url_to_script, array( 'jquery', 'wp-color-picker' ), '3.0.4', $args );\r\n\r\n    // Add inline script to initialize the color picker\r\n    wp_add_inline_script(\r\n        'wp-color-picker-alpha',\r\n        'jQuery( function() { jQuery( \".color-picker\" ).wpColorPicker(); } );'\r\n    );\r\n\r\n    // Enqueue the wp-color-picker-alpha script\r\n    wp_enqueue_script( 'wp-color-picker-alpha' );\r\n    ```\r\n\r\n3. **Add Class and Data Attribute**: Add the class `.color-picker` and the attribute `data-alpha-enabled=\"true\"` to your input elements. For example:\r\n\r\n    ```html\r\n    \u003cinput type=\"text\" class=\"color-picker\" data-alpha-enabled=\"true\" /\u003e\r\n    ```\r\n\r\n\u003e [!IMPORTANT]\r\n\u003e Only run in input and is defined data alpha in true.\r\n\u003e\r\n\u003e In versions prior to 3.0.0, this script started automatically. This behavior has been changed and it no longer starts automatically.\r\n\r\n\u003e [!CAUTION]\r\n\u003e This is a sample of how it should be included and should be adjusted as needed.\r\n\r\n\u003e [!TIP]\r\n\u003e Remove unnecessary comments once the functionality is understood.\r\n\r\n### Optional Attributes\r\n\r\nYou can use the following optional attributes to customize the behavior of the color picker:\r\n\r\n| Attribute                     | Description                                                                                                                                                 | Default |\r\n| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |\r\n| `data-alpha-reset`            | Disables transparency after selecting a color from the palette.                                                                                             | `false` |\r\n| `data-alpha-custom-width`     | Changes the default input width. Specify the desired width in pixels. To disable it, set the value to `false` or `0`.                                       | `130`   |\r\n| `data-alpha-color-type`       | Sets the color format. Supports hex, rgb, hsl. This script converts to the corresponding type and the alpha channel is set. Use octohex to return RRGGBBAA. | `hex`   |\r\n| `data-alpha-skip-debounce`    | Skips the debounce when setting the color inside the input. Set to true to skip the debounce.                                                               | `false` |\r\n| `data-alpha-debounce-timeout` | Changes the default debounce timeout in milliseconds.                                                                                                       | `100`   |\r\n\r\n\u003e [!TIP]\r\n\u003e You can check or see an example of how to implement it in this repository [wp-color-picker-alpha-plugin](https://github.com/kallookoo/wp-color-picker-alpha-plugin).\r\n\u003e If you want to try it install it like any other plugin that is not in the WordPress repository.\r\n\r\n## Screenshots\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003eImages\u003c/summary\u003e\r\n\r\n### wpColorPicker\r\n\r\n![wpcolorpicker-01](./docs/screenshot-01.png)\r\n\r\n### wpColorPicker in mode Alpha Channel\r\n\r\n![wpcolorpicker-02](./docs/screenshot-02.png)\r\n\r\n![wpcolorpicker-03](./docs/screenshot-03.png)\r\n\r\n\u003c/details\u003e\r\n\r\n## Changelog\r\n\r\nSee [CHANGELOG](CHANGELOG.md) for more information.\r\n\r\n## Contributions and Support\r\n\r\nIf you would like to contribute please fork the project and [report bugs][2] or submit [pull requests][3].\r\n\r\n\u003e [!IMPORTANT]\r\n\u003e Read the [CONTRIBUTING.md](/CONTRIBUTING.md) beforehand.\r\n\r\n[1]: https://github.com/Automattic/Iris\r\n[2]: https://github.com/kallookoo/wp-color-picker-alpha/issues\r\n[3]: https://github.com/kallookoo/wp-color-picker-alpha/pulls\r\n[4]: https://github.com/WordPress/WordPress/blob/master/wp-admin/js/color-picker.js\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkallookoo%2Fwp-color-picker-alpha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkallookoo%2Fwp-color-picker-alpha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkallookoo%2Fwp-color-picker-alpha/lists"}