{"id":31072,"date":"2020-06-23T10:16:58","date_gmt":"2020-06-23T10:16:58","guid":{"rendered":"https:\/\/www.designbombs.com\/?p=31072"},"modified":"2020-06-26T08:30:06","modified_gmt":"2020-06-26T08:30:06","slug":"adding-modal-windows-in-the-wordpress-admin","status":"publish","type":"post","link":"https:\/\/www.designbombs.com\/adding-modal-windows-in-the-wordpress-admin\/","title":{"rendered":"Adding Modal Windows in the WordPress Admin Without JavaScript"},"content":{"rendered":"

When creating a theme or plugin for WordPress which requires users to read some documentation, it is a good idea to display the documentation right within the WordPress admin. Otherwise, making the user browse an external site could produce a negative experience from the additional friction.<\/p>\n

I have written about displaying documentation within Gutenberg<\/a>, which enables to make use of the available React-based components for different use cases. For instance, we can display our documentation by reusing the <Guide><\/code> component:<\/p>\n

\"Gutenberg<\/p>\n

However, what happens if we are not operating within Gutenberg? For instance, we may have coded our plugin long time ago, and migrating it to Gutenberg is too much of an effort. In that case, how could we manage to open a modal window in the WordPress admin?<\/p>\n

Unsurprisingly, we can reuse any functionality shipped anywhere by WordPress, not just through Gutenberg. And WordPress does already provide an implementation of a modal window, which is originally used to display plugin information:<\/p>\n

\"Modal<\/p>\n

Even though designed for plugins, the modal window can nevertheless display any arbitrary content, since it is simply an iframe<\/code> embedding the intended page, for any page from the same domain. And opening the modal window can be triggered from anywhere within the WordPress admin, not just from within the plugins page.<\/p>\n

For instance, similar to the plugins page, our plugin could print a table with custom entries, and a “View details” link below each entry:<\/p>\n

\"A<\/p>\n

And when clicking on this link, it opens a modal window to display the entry’s corresponding documentation:<\/p>\n

\"Showing<\/p>\n

In this article we will learn how to do this. The goal is to reuse the WordPress admin’s modal windows for our own themes or plugins, without depending on Gutenberg for this basic functionality.<\/p>\n

Loading the JS\/CSS assets<\/h2>\n

WordPress handles the modal windows through the following 3 files:<\/p>\n

File wp-includes\/js\/thickbox\/thickbox.js<\/code><\/a> loads ThickBox, the library that provides the functionality for the modal window.<\/p>\n

File wp-includes\/js\/thickbox\/thickbox.css<\/code><\/a> gives the styles for the modal window, including its placement on the page, and transitions when opening\/closing the modal.<\/p>\n

File wp-admin\/js\/plugin-install.js<\/code><\/a> loads the event which, when clicking on a corresponding link, opens the modal window.<\/p>\n

WordPress loads these 3 files for the plugins page:<\/p>\n

\"Loaded<\/p>\n

However, these files are not always loaded in the WordPress admin, only in the plugins page. So, we must add some code to load them in the page where we want to open the modal window. Since the 3 assets are already registered (through file wp-includes\/script-loader.php<\/code><\/a>), we can simply enqueue them for the corresponding page:<\/p>\n

add_action('admin_enqueue_scripts', 'enqueue_modal_window_assets');\r\n\r\nfunction enqueue_modal_window_assets()\r\n{\r\n  \/\/ Check that we are on the right screen\r\n  if (get_current_screen()->id == 'my_menu_page') {\r\n    \/\/ Enqueue the assets\r\n    wp_enqueue_style('thickbox');\r\n    wp_enqueue_script('plugin-install');\r\n  }\r\n}\r\n<\/code><\/pre>\n
This code loads the assets for a menu page<\/a> with slug \"my_menu_page\"<\/code>. Enqueuing file plugin-install.js<\/code> also loads thickbox.js<\/code>, so we can skip enqueueing this latter one.<\/p>\n
Printing the link to open the modal window<\/h2>\n
The JavaScript assets introduced above load the modal window in the page, and listen for certain links to be clicked; when that happens, the URL under the link’s href<\/code> attribute is extracted, and loaded into the modal window’s iframe<\/code>.<\/p>\n
The following code will print a link which, upon clicking, will open the modal window and load within a custom page from the WordPress admin:<\/p>\n
$url = admin_url('admin.php?page=my_menu_page&TB_iframe=true&width=600&height=550&modal_window=true');\r\nprintf(\r\n  '<a href=\"%s\" class=\"thickbox open-plugin-details-modal\" data-title=\"%s\">%s<\/a>',\r\n  $url,\r\n  __('View details', 'graphql-api'),\r\n  __('Plugin documentation', 'graphql-api')\r\n);\r\n<\/code><\/pre>\n
The link has the following attributes:<\/p>\n