Theming with WP REST API - Part 14 - Adding Custom Fields

functions.php

@@ -98,3 +98,30 @@ function prepare_rest($data, $post, $request){
     return $data;
 }
 add_filter('rest_prepare_post', 'prepare_rest', 10, 3);
+
+add_action('rest_api_init', 'register_custom_fields', 1, 1);
+
+function register_custom_fields(){
+    register_rest_field(
+        'movies',
+        'year',
+        array(
+            'get_callback' => 'show_fields'
+        )
+    );
+
+    register_rest_field(
+        'movies',
+        'director',
+        array(
+            'get_callback' => 'show_fields'
+        )
+    );
+}
+
+function show_fields($object, $field_name, $request){
+    $field_name = 'wpcf-' . $field_name;
+    return get_post_meta($object['id'], $field_name, true);
+}
+
+

index.php

@@ -167,6 +167,8 @@
             <article v-for="movie in movies" class="post">
                 <div class="post-content">
                     <h2>{{ movie.title.rendered }}</h2>
+                    {{ movie.year }}
+                    {{ movie.director }}
                 </div>
             </article>
         </div>

js/app.js

@@ -76,11 +76,18 @@ var singlePost = Vue.extend({
 
 var movieList = Vue.extend({
     template: '#movie-list-template',
+    data: function(){
+        return {
+            movies: '',
+        }
+    },
 
     route:{
         data: function(){
             this.$http.get('/wp-json/wp/v2/movies', function(movies){
                 this.$set('movies', movies);
+
+                console.log(JSON.stringify(movies));
             })
         }
     }