Hooked function "is not defined"

Question

For debug purposes in further development, I am trying to add a simple function to a WordPress site and execute it in the Firefox console.

As in https://developer.wordpress.org/reference/functions/add_action/, I put into functions.php of my OceanWP theme:

add_action( 'hello_world', 'hdt_hello_world' );

 function hdt_hello_world($text) {
    echo 'Hello World!';
    echo $text;
 }

Reload the page and try to execute from Firefox Console, getting:

hello_world('Hi!');
Uncaught ReferenceError: hello_world is not defined
    <anonymous> debugger eval code:1

Seems I miss the point somewhere... Could you give a hint?

Answer 1

The hint by Hamid Reza Yazdani helped to clarify: I basically tried to call a PHP function in browser console - it's not intended to work - and will not work - this way.

The (hopfully) proper way is to create a JavaScript function and enqueue it using a WordPress hook.

1. In the assets/js folder of the WP theme, create a file, e.g. my_functions.js, with the following code:

function my_hello_world(text) {
   console.log("Hello world!");
   console.log(text);
}

2. In the functions.php file of the theme (not update-safe!), add:

function my_functions_enqueue_script() {
    wp_enqueue_script( 'my_functions', get_template_directory_uri() . '/assets/js/my_functions.js', array ( 'jquery' ), 0.1, true);
}

add_action('wp_enqueue_scripts', 'my_functions_enqueue_script');

The execution of my_hello_world('Hi!'); in browser console then yields the desired console output.

For more details, see:

• https://developer.wordpress.org/themes/basics/including-css-javascript/
• https://developer.wordpress.org/plugins/hooks/actions/
• Look up corresponding WP functions under https://developer.wordpress.org/reference/

If server-side PHP execution (esp. AJAX) is needed, a more complex interaction between JS and PHP code needs to be implemented 'the WordPress way'; one may look at:

• https://developer.wordpress.org/plugins/javascript/enqueuing/
• https://shellcreeper.com/wp-ajax-for-beginners/
• https://codex.wordpress.org/AJAX_in_Plugins