ajaxurl no está definido en el front-end

Para usar ajaxurl directamente, en tu archivo de plugin añade esto:

add_action('wp_head', 'myplugin_ajaxurl');

function myplugin_ajaxurl() {

   echo '<script type="text/javascript">
           var ajaxurl = "' . admin_url('admin-ajax.php') . '";
         </script>';
}

Luego puedes usar ajaxurl para peticiones AJAX.

La forma de hacerlo en 2021 es un poco diferente ;-)

function my_enqueue() {

    wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );

    wp_add_inline_script( 'ajax-script', 
        'const myVariables = ' . json_encode( 
                                    array(
                                        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
                                        ) ),
        'before' );

}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

Fuente: https://developer.wordpress.org/reference/functions/wp_add_inline_script/#comment-4632

He utilizado el siguiente código en un sitio WordPress.
Podemos usar el siguiente código para configurar ajaxurl de esta manera.

<?php echo esc_url(admin_url('admin-ajax.php')); ?>  

También he añadido un ejemplo de ajax donde podemos usar la línea anterior.

 function setNotificationRead() {
        fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            },
            body: `action=yourFunctionsAction`,
            credentials: 'same-origin'
        }).then(response => {
            return response.json();
        }).then(data => {
            if (data.status === 'true') {
                console.log('Hacer algo...');
            }
        });
    }

Logré que esto funcione después de muchas horas... y pruebas y errores. Así que, comparto cómo hacer que ajax funcione en WordPress con un ejemplo (comencé con https://www.tweaking4all.com/web-development/wordpress/wordpress-ajax-example/#comment-562814 y adapté el ejemplo)

--usa las herramientas de desarrollador de Chrome y desactiva la caché desde la pestaña de red --revisa la consola si obtienes algún error, el primer objetivo es ver "¡listo!" en la consola cuando hagas clic en el botón y si todo funciona, ¡también obtendrás una buena salida!

--agrega al sitio de WordPress como un bloque HTML personalizado:

<div id="receiving_div_id">
   <p>No se ha cargado nada aún</p>
</div>
<button id="button_to_load_data">Obtener Contenido Ajax</button>

--agrega a theme/js/button.js (crea la carpeta js si no existe):

   jQuery("#button_to_load_data").click(function() {
        console.log( "¡listo!" );
      var data = {
         'action'   : 't4a_ajax_call', // ¡el nombre de tu función PHP!
         'function' : 'show_files',    // un valor aleatorio que queremos pasar
         'fileid'   : '7'              // otro valor aleatorio que queremos pasar
         };
       
      jQuery.post(my_ajax_object.ajax_url, data, function(response) {
         jQuery("#receiving_div_id").html(response);
      });
   });

--agrega a functions.php del tema:

 /* script personalizado en functions.php del tema */

/* lee button.js (->my-script) y localiza admin-ajax.php para my-script */
function add_my_script() {

  wp_enqueue_script( 'my-script', 
         get_template_directory_uri() . '/js/button.js', 
         array ( 'jquery' ), 
         false,
         true
  );
  
      wp_localize_script( 'my-script', 'my_ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

}
add_action( 'wp_enqueue_scripts', 'add_my_script' );