Today is going to be a quick one, and as I get closer to my product that I want, I may slow down in my tutorials and pushing the code to the repo, I think half the learning experience is taking something that is ALMOST there, and making it your own, or customizing it. I mean that is what WordPress is, not many people sell websites with the default theme and no plugins, right?

WP-API Adding Post Custom Meta to Post Data

I am going to store data for each style guide post into custom meta fields for the post. By default, users who are unauthorized to view this data, can’t. However the WP-API has awesome code standards with filters API to manipulate data before it gets sent back to the client side. Since this doesn’t directly effect our view, but the data going to the view, we are going to put this into the plugin. I created a new file called sg-custom-api.php which lacks imagination as far as naming goes. I may use this as a general php file to add in “hacks” or “additions” to the data around the WP-API, as apposed to routes.

Adding custom field data to the return POST object is easy, we need to tie into the json_prepare_post filter.

With this simple function, I am checking the post type, and if it is style-guides which is the custom post type that was created, then add sg_meta into the $data object. This is where if you want to get really specific with things you can, but I am just going to want ALL my post meta within this array, so I’m going to just call the get_post_meta() function without a specific handle, so it returns an array of all post meta.

Post Object returned to Front End

The post object returned from the server now has a new array sg_meta.

The above example has an empty array because there is no post meta for that post, here is an example with some.

It is nice to leave post meta as an array rather dealing with making it without. For this app this will come in handy as most of our Style Guide’s post meta will be arrays of data.

AngularJS – Custom Endpoint for Method within a Factory

Back in Part V we created our first AngularJS Factories, however what if when you saved data you want to go to a different endpoint for the WP-API then when you get data? We saw how easy it was to add in extra data on the GET request for the posts, but it is not as easy to do the same thing when you are creating new posts or updating. This may come in handy for many other use cases, but this is an easy way to see how it works.

The Style Guides Factory

First we have to edit the AngularJS factory itself, so lets open up the theme and go over to wp-app-factories.js.

You see how we have an override for the “update” method declaring that instead of it actually being “UPDATE” in the header, we want it to be “PUT”? Well we are going to add to that override.

We add in the override url, and in case we need to change up the parameters, added in the new parameters and their identifiers.

Now when we do StyleGuides.save({id: X}); it won’t hit the APIdata.api_url + ‘/posts/:id endpoint but the APIdata.api_url + ‘/save_sg/:id endpoint, which we will create next.

Creating the Endpoint

In Part VI we created custom endpoints for the WP-API, defined in our plugin. We are going to the same thing, but this time we are only going to define 1 method, the save method.

In the plugin file, open inc/sg-api-routes.php to find our already defined custom routes and lets add one

Here is the code for the new route definition, for sake of showing you how I debug, I’m going to show you the first iteration of the callback function, then the final version.

For Debugging to make sure it works

This should just take the data being passed in, puts it into a $return array, and sends the  $return back. I test the endpoint with POSTMAN Chrome Client, which I’ll add to a “testing WP-API” resource guide later. You can also test it out by sending any data to /wp-json/save_sg/{id} where you put int he ID of some Style Guide you created, you should get a return object of your data.

The simples way to handle ANY post meta is simple. If the data you are passing through has all custom meta in 1 array, you can just loop through that array, for example:

If that is the (part of) data object being sent to the endpoint then $data[‘meta’] will be an array of all the meta fields you want saved and you have their values.. so easy as pie!

Easy.. now my post will have post meta ‘colo1’ saved as ‘#FFF’ and ‘colo2’ saved as ‘#000’

Edit Post Template

Next update I will go into the template for the edit post, since authentication of who is allows to edit or see the form, etc.

There are 4 comments Join the conversation

Comments are closed.