0

I am trying to use Ajax and jQuery to post data to a custom post type. The title field works as is standard wordpress field but the color field does not. I also tried replacing 'color' with the name of the ACF itself like 'field_5ec63bc5b6fe0' but that also does not work.

$('.submit-color').on('click', function (e) {
    e.preventDefault();
    var newColor = {
        'title': $( '.title' ).val(),
        'color': $( '.color' ).val(),
        'status': 'private'
    }
    $.ajax({
            url: myData.root_url + '/wp-json/wp/v2/color/',
            type: 'POST',
            data: newColor,
            beforeSend: (xhr) => {
            xhr.setRequestHeader('X-WP-Nonce', myData.nonce);
            }
        })
        .done(function (data) {
            console.log(data);

        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus + ': ' + errorThrown);
            console.warn(jqXHR.responseText);
        });
})
1

If the custom field's name (i.e. meta key) is correct and the field is enabled for the REST API, then you should be able to update the meta by adding it in the meta property, which is an array of meta key-value pairs, like so:

var newColor = {
  'title': $( '.title' ).val(),
  'meta': {
    'color': $( '.color' ).val(),
    'key2': 'value',
    'key3': 'value',
    // ...
  },
  'status': 'private'
}

Update: You can use register_meta() or register_post_meta() to enable the meta for the REST API: (without using any 3rd-party plugin)

// First parameter is the post type.
register_post_meta( 'color', 'color', [
    'single'       => true,
    'show_in_rest' => true,
    // Other args, if any.
] );

Update 2: Regarding the "ACF to REST" plugin, you should check the documentation here, but from what I could tell:

  1. You'd want to enable the filters here.

  2. Use the endpoint /wp-json/acf/v3/color to add or update your color custom post.

  3. Use the fields property instead of meta for the default endpoint (/wp-json/wp/v2/color). So for example, you'd use 'fields': { 'color': $( '.color' ).val() } in your JS.

(You're supposed to find that on your own.. but anyway, I hope it helps and please check the docs for further assistance.)

| improve this answer | |
  • Thanks so much for your answer. I am trying to add a new post, not update an existing one. I have tried your code by adding meta: but it still only creates a new record with the title but the color is empty. You also mentioned that the field is enabled for REST API, that might also have something to do with it? – user10980228 May 21 at 10:31
  • I installed ACF to REST plugin I see something new in the response but the value is always null. acf: color: null – user10980228 May 21 at 10:39
  • I hope the revised answer helps? – Sally CJ May 21 at 11:00
  • Also make sure that the meta key is actually correct - is it color? And also is the post type really color? I.e. Both the meta and post type share the same name (color)? – Sally CJ May 21 at 11:10
  • 1
    Thank you, I really appreciate your help and patience. – user10980228 May 21 at 14:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.