Triggering the Advanced Custom Fields (ACF) 'acf/save_post' Action

Question

I've read the ACF 'acf/save_post' documentation here: acf-save_post^Docs, which states this action enables one to add additional functionally before or after saving/updating a post. I want to test when this action is triggered.

I created a custom post type and a collection of ACF custom fields that are linked to this custom post type.This includes some ACF custom field types that I created using the ACF Starter Kit (see: creating-a-new-field-type^Docs), and they are used for some of the ACF custom fields. When I edit a custom post and then click the 'Update' button in the Gutenberg editor, I expect the 'acf/save_post' action to fire, but it does not seem to do so. Perhaps I am missing something. Here is the relevant code from my theme's 'function.php' file.

function my_acf_save_post($post_id) {
  console_log("Testing...");
}
add_action('acf/save_post', 'my_acf_save_post', 20);

function console_log($output, $with_script_tags = true) {
  $js_code = 'console.log(' . json_encode($output, JSON_HEX_TAG) . ')';

  if($with_script_tags) {
    $js_code = '<script>' . $js_code . '</script>';
  }

  echo $js_code;
}

Citation for the 'console_log' function: Kim Sia (see: https://stackify.com/how-to-log-to-console-in-php/).

I have my web browser's inspector window opened for my custom post type post's editor. After modifying the post and clicking 'Update', nothing displays in the inspector's console pane. I posted about this in the ACF forum but have received no response.

Your feedback is appreciated. Thank you.

Answer 1

Find below the instructions of how to debug that ACF hook in WordPress. Official document for further details: https://wordpress.org/support/article/debugging-in-wordpress/

Note that there are other, more sophisticated and efficient ways of debugging in WordPress, for example using a proper debugger like xdebug.

These are usually harder to setup though, so here I am giving you the "WordPress in-built" way that might be simple, but is easy and effective.

ENABLE DEBUGGING

First, you need to enable debugging in wp-config.php, which I think you already did, but for others reading this answer, what you should do is:

1. Open in a text editor the file called wp-config.php, located in the wordpress installation root

2. Add the following to this file:

   define('WP_DEBUG', true); => This enables debugging

   define('WP_DEBUG_DISPLAY', false); => This prevents error logging from displaying on screen (affects both frontend and backend)

   define('WP_DEBUG_LOG', true); => This logs the output to a file where you can then check it

You must add these yes or yes above the line /* That's all, stop editing! Happy blogging. */

Done! Now you are logging, by default, to a file that will get generated in the root of the wp-content directory named debug.log.

WARNING! It is recommended to not leave debugging enabled on Production environments, as well as it is recommended to not leave the debug.log file as it could leave sensible site information exposed. Use for development only, and disable and remove file when finished. File can also be saved to a custom file name and location, see docs.

ERROR LOG

console.log is usually used for debugging js.

To log your function in PHP using the enabled debugger above, do the following:

function my_acf_save_post($post_id) {
   
   error_log( 'Saved post ID : ' . $post_id, false);
   error_log( var_export($_POST, true), false );

   //If you want to log what got saved to the database
   error_log( var_export(get_post($post_id), true), false );

}
add_action('acf/save_post', 'my_acf_save_post', 20);

You should find the saved post data and the ACF data recorded in a file named debug.log in your wp-content directory root.

LOGGING TO SCREEN

If instead what you want is to see the output that would have got written to the file, but directly on the screen, you don't need error_log() function, and instead you do that as shown below:

function my_acf_save_post($post_id) {
   
   echo 'Saved post ID : ' . $post_id;
  
   // Add <pre> tags to format the output in an easily readable way:
   echo '<pre>';
   print_r($_POST);
   echo '</pre>';
}
add_action('acf/save_post', 'my_acf_save_post', 20);