How to Fix ajaxurl Not Defined on the WordPress Frontend

Sharing is caring!

What is the ajaxurl?

The ajaxurl is a JavaScript variable in WordPress that specifies the URL that handles WordPress Ajax requests. It points to the admin-ajax.php file, typically found in the WordPress admin directory. For example, if your WordPress site is installed at https://example.com, the ajaxurl would be https://example.com/wp-admin/admin-ajax.php.

Why is ajaxurl not defined on the frontend?

The ajaxurl variable is usually not defined on the WordPress frontend. This likely stems from the original intention of using Ajax only in the WordPress admin area, as admin-ajax.php is located in the wp-admin folder. In the admin context, WordPress automatically defines this variable for you. However, on the frontend, you need to define it manually.

Why the Name ajaxurl?

Typically, one might expect a more consistent naming convention, like ajax_url or wp_ajax_url. The name ajaxurl seems to have been chosen early in WordPress’s development, before such conventions were fully established. Consistent naming is indeed preferable, as it enhances code readability and maintainability.

How to define ajaxurl on the frontend

There are several ways to define ajaxurl on the frontend. The quickest method is to add a snippet of code to your theme’s functions.php file. However, a better practice is to create a custom plugin to handle this. This approach keeps your theme files clean and makes the functionality portable across different themes.

Adding ajaxurl in your current theme’s functions.php

To define ajaxurl in your theme’s functions.php, add the following code:

add_action('wp_head', 'wpsandbox_post1271_render_ajax_url_on_frontend', 5);

/**
 * This function will render the ajaxurl on the frontend for more info visit: https://wpsandbox.net/1271
 * @return void
 */
function wpsandbox_post1271_render_ajax_url_on_frontend() {
	$ajax_url = admin_url('admin-ajax.php');
	?>
    <!-- wpsandbox_post1271_render_ajax_url_on_frontend - https://wpsandbox.net/1271 -->
    <script type="text/javascript">
        var ajaxurl = '<?php echo esc_url($ajax_url); ?>';
    </script>
    <!-- /wpsandbox_post1271_render_ajax_url_on_frontend - https://wpsandbox.net/1271 -->
	<?php
}

Creating a Custom Plugin (recommended)

Creating a custom plugin is a cleaner way to manage custom functionality. Here’s how you can do it:

Create the WordPress Plugin Manually

1. Connect to your site using your favorite FTP program and then go to www/wp-content/plugins/ folder
2. Create a Plugin Directory named wpsandbox-define-ajaxurl.
3. Create a php file inside this directory named wpsandbox-define-ajaxurl.php
4. Add the following code snippet

<?php
/*
  Plugin Name: WPSandbox.net - Define ajaxurl on the WordPress Frontend
  Plugin URI: https://wpsandbox.net/1271
  Description: This is from a WPSandbox blog post at https://wpsandbox.net/1271
  Version: 1.0.0
  Author: Svetoslav Marinov (Slavi) | WPSandbox
  Author URI: https://wpsandbox.net
 */

add_action('wp_head', 'wpsandbox_post1271_render_ajax_url_on_frontend', 5);

/**
 * This function will render the ajaxurl on the frontend for more info visit: https://wpsandbox.net/1271
 * @return void
 */
function wpsandbox_post1271_render_ajax_url_on_frontend() {
	$ajax_url = admin_url('admin-ajax.php');
	?>
    <!-- wpsandbox_post1271_render_ajax_url_on_frontend - https://wpsandbox.net/1271 -->
    <script type="text/javascript">
        var ajaxurl = '<?php echo esc_url($ajax_url); ?>';
    </script>
    <!-- /wpsandbox_post1271_render_ajax_url_on_frontend - https://wpsandbox.net/1271 -->
	<?php
}

Create the WordPress plugin using our WordPress Plugin Generator (quicker)

You can use our WordPress Plugin Generator to package this snippet into a WordPress plugin. The performance is going to be the same as if you put the code into functions.php but things will be way more organized and it will work after you switch to a different WordPress theme.

Activate the Plugin

In order for the fix to start working you need to activate the plugin.

Go to the WordPress Admin Dashboard > Plugins, and Activate your new plugin

How to verify if the ajaxurl is really defined?

you need to open your site and then view the page source code. Usually when you right click there should be view source.

Then search for ajaxurl in the code. Use CTRL+F (Windows or Linux) or CMD+F (Mac) to search for the keyword.

ajax_url is not defined. Incorrect uses ajaxurl. it has to be one word unfortunately.

Related

https://wordpress.stackexchange.com/questions/190297/ajaxurl-not-defined-on-front-end

Sharing is caring!