PHPackages threadi/easy-dialog-for-wordpress - 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. [Utility & Helpers](/categories/utility) 4. / 5. threadi/easy-dialog-for-wordpress ActiveLibrary[Utility & Helpers](/categories/utility) threadi/easy-dialog-for-wordpress ================================= Provides a simple react-driven dialog-modal for the WordPress-backend. 1.0.2(4mo ago)01.0k↑587.5%1GPL-3.0-or-laterJavaScript Since Oct 6Pushed 3mo ago1 watchersCompare [ Source](https://github.com/threadi/easy-dialog-for-wordpress)[ Packagist](https://packagist.org/packages/threadi/easy-dialog-for-wordpress)[ RSS](/packages/threadi-easy-dialog-for-wordpress/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (3)DependenciesVersions (8)Used By (1) Easy Dialog for WordPress ========================= [](#easy-dialog-for-wordpress) This script enables the output of modal dialogs in the WordPress backend. It is fully flexible and can be used for a wide variety of applications. [![Easy Dialog for WordPress Example](https://camo.githubusercontent.com/d3e739f4af575a422ce9ac0aa92f3e5e814d82d271a50da0e1e6e31a15a2d9f6/68747470733a2f2f7777772e74686f6d61737a7769726e65722e64652f77702d636f6e74656e742f75706c6f6164732f323032362f30322f656173792d6469616c6f672d666f722d776f726470726573732d64656d6f2d6469616c6f672e706e67)](https://camo.githubusercontent.com/d3e739f4af575a422ce9ac0aa92f3e5e814d82d271a50da0e1e6e31a15a2d9f6/68747470733a2f2f7777772e74686f6d61737a7769726e65722e64652f77702d636f6e74656e742f75706c6f6164732f323032362f30322f656173792d6469616c6f672d666f722d776f726470726573732d64656d6f2d6469616c6f672e706e67) This is the repository for the script. The target group is developers of WordPress plugins and themes. Regular WordPress users should contact their technical support person if they have any questions. Requirements to use this package -------------------------------- [](#requirements-to-use-this-package) - *composer* to install this package. - *npm* to compile the scripts. - WordPress plugin, theme or a *Code Snippet*-plugin to embed it in your project. Installation ------------ [](#installation) 1. `composer require threadi/easy-dialog-for-wordpress` 2. Switch to `vendor/thread/easy-dialog-for-wordpress` 3. Run `npm i` to install dependencies. 4. Run `npm run build` to compile the scripts. 5. Add the codes from `doc/embed.php` to your WordPress plugin or theme. Configuration ------------- [](#configuration) Any dialog is configured with the following options as an array (each is optional): - callback - a JS-callback which is called if the dialog is mounted - className - string with names the modal should become to set individual styles - title - represents the title as a single text - texts - array of texts for the dialog - each entry contains a single string - buttons - array of buttons for the dialog - each entry is an array with the following settings: - action - string of JavaScript to run on click - href - string for href-attribute on the button - variant - string to define button-styling - possible values: - primary - secondary - this setting is optional - className - string for additional css-class on the button - text - string for the button-text - hide\_title - value set to `true` to hide the title - isDismissible - value set to `true` to show X to close the dialog - shouldCloseOnClickOutside - value set to `true` to close the dialog on click outside the dialog - shouldCloseOnEsc - value set to `true` to close the dialog via key "esc" Usage ----- [](#usage) ### PHP [](#php) ### Example 1 [](#example-1) ``` $dialog = array( 'title' => 'My title', 'texts' => array( 'My text' ), 'buttons' => array( array( 'action' => 'alert("ok");', 'variant' => 'primary', 'text' => 'Click here' ), ) ); echo 'Some link'; ``` ### Example 2 [](#example-2) ``` $dialog = array( 'title' => 'My title', 'texts' => array( 'My text' ), 'buttons' => array( array( 'action' => 'alert("ok");', 'variant' => 'primary', 'text' => 'Click here' ), ) ); // define dialog settings. $dialog_settings = array( 'shouldCloseOnEsc' => true ); echo 'Some link'; ``` ### JavaScript [](#javascript) ### Example [](#example) ``` let dialog = array( 'title' => 'My title', 'texts' => array( 'My text' ), 'buttons' => array( array( 'action' => 'alert("ok");', 'variant' => 'primary', 'text' => 'Click here' ), ) ); document.body.dispatchEvent( new CustomEvent( "easy-dialog-for-wordpress", { detail: dialog } ) ); ``` Custom styles ------------- [](#custom-styles) You can customize the output of the dialog with your custom CSS. E.g.: ``` body.easy-dialog-for-wordpress.wp-core-ui .components-modal__frame.easy-dialog { background-color: red; } ``` FAQ --- [](#faq) ### Which WordPress version is required? [](#which-wordpress-version-is-required) The lowest tested version is WordPress 5.9. ### How to simply close the active dialog? [](#how-to-simply-close-the-active-dialog) Use this JavaScript function: `closeDialog();` ### Is it possible to create multiple dialogs on one screen? [](#is-it-possible-to-create-multiple-dialogs-on-one-screen) No, you will be able to show only one dialog at the same time. ### How to open a new dialog after the click on a button in dialog? [](#how-to-open-a-new-dialog-after-the-click-on-a-button-in-dialog) Call your own function as a callback for the button. Example: ``` 'action' => 'open_new_dialog()', ``` ``` function open_new_dialog() { /* define your new dialog */ } ``` ### How to process the result of a button click? [](#how-to-process-the-result-of-a-button-click) Call your own function as a callback for the button. This function should be contain the way to process the result of the button click. Example: ``` 'action' => 'custom_process_button_click()', ``` ``` function custom_process_button_click() { /* define how to process the result of the button click */ } ``` Tipp: when you display form fields within the dialog, you can easily collect their values using JavaScript. Simple example: ``` let my_field_value = jQuery('#yourFieldId').val(); ``` ### Health Score 40 — FairBetter than 88% of packages Maintenance78 Regular maintenance activity Popularity20 Limited adoption so far Community9 Small or concentrated contributor base Maturity44 Maturing project, gaining track record 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 ~223 days Total 3 Last Release 141d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/e7a1a0cb36bcd1de4fc890549902fe36e51f89dd126fb83f0dba09a4d5ecdfb7?d=identicon)[threadi](/maintainers/threadi) --- Top Contributors [![threadi](https://avatars.githubusercontent.com/u/16623633?v=4)](https://github.com/threadi "threadi (10 commits)") ### Embed Badge ![Health badge](/badges/threadi-easy-dialog-for-wordpress/health.svg) ``` [![Health](https://phpackages.com/badges/threadi-easy-dialog-for-wordpress/health.svg)](https://phpackages.com/packages/threadi-easy-dialog-for-wordpress) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)