WordPress 404 when using AJAX to call php function

Question

I'm new to WP and php, but am very experienced with AJAX. I'm trying to use jQuery to call a php function, which utilizes the WP Twilio Core plugin. I have the twilio.php file in the custom theme's directory, along with the custom jQuery.

Some stackoverflow answers implied you must make all AJAX calls to admin_ajax.php, which then delegates to the php function for you. I receive a 404 every time I try to reach it. Thanks.

HTML

<!-- IN HEADER FILE -->
<?php
  add_action('wp_ajax_mycustomfunc', 'twilioSMS');
?>

<form>
  <input size="50" type="text" name="number_to" placeholder="+16175551212" id="number_to" class="regular-text" />

  <script type="text/javascript">
    var ajax_url = "<?php echo admin_url('admin_ajax.php'); ?>"
  </script>

  <?php wp_nonce_field( 'twl-test' ); ?>
  <p><input id="twilio_button" type="submit" class="button-primary" value="Send Message" /></p>
</form>

JS

$("#twilio_button").click(function(e) {
    e.preventDefault();
    var number_to = $("#number_to").val();
    var data = {
        "action": "twilioSMS",
        "number": number_to
    };

    $.post(ajax_url, data)
    .done(function(res) {
        console.log("RES", res);
    })
    .fail(function(err) {
        console.log("ERR", err);
    });
});

PHP (Not even getting here)

<?php
  echo "<script type='text/javascript'>console.log('yo');</script>";

  if(isset($_POST["number_to"])) {
    $args = array(
      "number_to" => $_POST["number_to"],
      "message" => "Hello",
    );

  echo twl_send_sms($args);
  exit;
   }
?>

Answer 1

When I was new to WP and PHP, a revelation occurred when I realized what PHP stands for. "PHP Hypertext Preprocessor." Sure, the recursive acronym is cool, but the "preprocessor" was what rung my bell. In other words, when a page is served, the PHP runs first, generating HTML, which is then interpreted by the browser. So you can't load a PHP file into your HTML doc and expect any interaction. It's already done its work and gone to the bar by the time your page is loaded.

The solution? AJAX (but you know this). And the best way to get started with WP and AJAX is to read the Codex.