There’s no native ability to add a dialog box for confirming post actions in WordPress. Luckily, since WordPress is extremely configurable we can develop one ourselves!
One of the clients recently requested that they wanted a pop up box to alert them if they had not filled in specific text boxes when publishing a new WordPress post. After researching if any plugins existed I found one called Confirm Publishing Actions which looked like it would meet my requirements. Unfortunately you could only configure it to alert the user on publish, delete and edit actions without any field conditionals available. So let’s see how we can leverage the code in this plugin and utilise wp_localize_script to connect PHP variables to Javascript in WordPress.
WordPress Administration Hook
Firstly, we want to load a Javascript file that will make an alert popup appear only in the WordPress dashboard when we want our post actions confirmed. The hook we use for this called admin_enqueue_scripts which will only fire when we are browsing the dashboard. . Add_action is the function that will run when the $hook is occurs
|
1 |
add_action( $hook, $function_to_add, $priority, $accepted_args ); |
Add the following to your functions.php file in your child theme.
|
1 2 3 4 5 |
function es_load_scripts($hook) { } add_action('admin_enqueue_scripts', 'es_load_scripts'); |
Post Actions WordPress
The next part is telling WordPress to load the Javascript file when specific post actions are encountered. In our example it will be when a new post is created. We need to modify the above code to the following so it only fires for posts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function atw_load_scripts($hook) { if( $hook == 'post.php' OR $hook == 'post-new.php') { //Check new posts then show pop up for missing company data wp_register_script('es_check_new_post', get_stylesheet_directory_uri().'/js/check-new-post-empty-fields.js', array('jquery') ); wp_enqueue_script('es_check_new_post'); $es_data = array( 'confirm_publish' => __( 'You are about to publish this post with blank company details. Proceed?', 'es' ) ,'publish' => __( 'Publish' ) ); //Allow passing of data to Javascript, script name must match enqueued one wp_localize_script( 'es_check_new_post', 'es_data_obj', $es_data ); } } add_action('admin_enqueue_scripts', 'atw_load_scripts'); |
The action admin_enqueue_scripts has a parameter called $hook which contains the page you are currently on in the dashboard. We only want our Javascript file loaded for WordPress post actions so we include the pages post.php and post-new.php in the if condition.
The file enqueued is located in the subdirectory ‘js’ of my child theme. Using a child theme means that you’ll need to use the function get_stylesheet_directory_uri() to return the url of the style.css which is the root directory for our child theme. The first parameter ‘es_check_new_post’ is called the handler which is sort of an internal identifier that WordPress uses.
We then can create an array of data to pass from the server (PHP) to the user (Javascript) in their browser. Wrapping it all up with the function wp_localize_script, we create a data object called ‘es_data_obj’ created from the array $es_data which will then be accessed from the Javascript handler ‘es_check_new_post’. All this will fire on the publish action which is one of many post actions in WordPress we could hook into.
Enqueued Javascript
Let’s take a look at the physical Javascript file ‘check-new-post-empty-fields.js’ which will fire on our post actions.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
jQuery(document).ready(function($) { $("input#publish").click(function() { var a = $(this).val(); var c = true; if (a == es_data_obj.publish) { var company_number = $('#iw_company_number').val(); var company_name = $('#iw_company_name').val(); if (!(company_number) || !(company_name)) { c = confirm(es_data_obj.confirm_publish); } } if (!c) { $("#submitpost .spinner").hide(); $("input#publish").removeClass("button-primary-disabled"); } return c; }); }); |
In this script I am checking if two fields in my post are blank or not. When the publish button is pressed on a new post if the company name and company number are blank then an alert window will pop up displaying the text that I created in the object called ‘es_data_obj’. The alert will only fire on new posts (publish) as I am checking the value that the button returns when pressed.
Object data values are referenced via dot notation, the example below returns the alert text we display to the user
|
1 |
es_data_obj.confirm_publish |
Final Remarks
If all goes according to plan you should receive an alert like this one when triggering post actions. You can see the blank fields in the background.
If things don’t seem to be working as they should, always remember to check your debugging console in Firefox and Chrome. One error that is common is to get a pop up window that says something like “Prevent this page from creating additional dialogs”. If this occurs then you have an issue with your Javascript.
Pretty neat function that can be extended to the delete and edit events of WordPress posts!