By default, WP-AppKit’s web services provide basic info about WordPress posts and custom post types:
- Title
- Content
- Excerpt
- Featured Image
- Author
However, it’s very common to use post custom fields to add metada to your content (eg. SEO description). To avoid any performance issue, we don’t include custom fields in the default data returned by the web services.
This article shows you how you may add custom fields to data returned by the WP-AppKit web services and display their values in your app’s theme.
On the WordPress Side
To add custom fields data, you use the wpak_post_data hook. It allows to modify the post related data sent to the app. It can be used inside the theme’s php folder or in a plugin. In our example, we use the php folder.
- First, if the php folder doesn’t exist in the theme’s folder, create it.
- Then add create the handle_my_post_metadata.php file inside it.
Below the code of handle_my_post_metadata.php file where we use the wpak_post_data hook to add the my_meta custom field to the data returned to the app.
add_filter( 'wpak_post_data', 'add_meta_to_my_app_posts', 10, 3 );
function add_meta_to_my_app_posts ( $post_data, $post, $component ) {
//Add our meta to the application post data :
$post_data['my_meta'] = get_post_meta( $post->ID, 'my_meta', true);
return $post_data; //Return the modified $post_data
}
If you use the Advanced Custom Fields (ACF) plugin and if my_meta is an ACF field, you can get it like this:
$post_data['my_meta'] = get_field('my_meta'); //Post ID not necessary here
It’s even possible to only return data only for a given post type or component type, using $post or $component arguments.
if( $post->post_type == 'my-post-type' ) { //add custom field here }
if( $component->slug == 'my-component' ) { //add custom field here }
On the App Side
As soon as you’ve added a custom field to the web services feedback, it is available on the app side. It means you can access it from the templates of the app’s theme. More specifically, it’s added to the post JSON object. You can use post.my_meta as you already use post.title .
Below an example of you find in archive.html or single.html.
<h1><%= post.title %> - <%= post.my_meta %></h1>
If the custom field’s value is a PHP array, it is a JavaScript array on the app side. You can get the custom field’s value as shown below.
<ul>
<% _.each( post.my_meta, function( item ) { %>
<li><%= item %></li>
<% } ); %>
</ul>
If the custom field’s value is a PHP object, it is a JSON object on the app side and you get its value as shown below (considering that you want to get the my_property property value).
<%= post.my_meta.my_property %>
Tip: If you’re not sure of the data’s nature, you can check what’s inside the post object with a simple console.log
<% console.log('My post : ", post) %>
Happy coding 🙂
Hi Benjamin
I’ve already applied what you have outlined but seems I must be doing something wrong here is the code
ID, ‘_OrganizerLogo’, true);
$post_data[‘image’] = get_post_meta( $post->ID, ‘_OrganizerImage’, true);
$post_data[‘website’] = get_post_meta( $post->ID, ‘_OrganizerWebsite’, true);
$post_data[’email’] = get_post_meta( $post->ID, ‘_OrganizerEmail’, true);
return $post_data; //Return the modified $post_data
}
?>
Its appearing in the JSON but its not returning the data itself its blank , notice the logo, email and website fields.
“image”:””,
“logo”:””,
“nb_comments”:0,
“post_type”:
“tribe_events”,
“title”:”Awesome Event”,
“website”:””
Thanks beforehand, very much appreciate your assistance
Regards
Said
Hi, your code seems to be incomplete. Could you submit it to support@uncategorized-creations.com?
Hi, I have done what is here but does not work as I could. Maybe requires a little more explanation or detail it better because not quite understand where each code is going, maybe I’m doing wrong.
So to be sure:
That’s for the PHP code. The Javascript code goes into .html templates into your app’s theme folder (eg. single.html).
If you’ve done that, could you tell me if you have any PHP or Javascript errors?
I have more than one custom field on single post. What code should I write on php file above?
You just have to create as many as keys you may need as you’ve created
$post_data['any_key_name_here'].Cool, its worked.
Hi.. can u help me to show custom fields to my app. I make tutorial but custom fields wont show. Who have best tutorial to share sorry my horrible engish
Hi Ivan,
You can reach us at support[at]uncategorized-creations.com with some more details about the custom fields you need to show (are they native post meta data, ACF fields, simple values, arrays… ?), and we’ll help you find what’s not working in your case.
Regards
Hi,
I show a CPT on an archive page. Text is ok but without line-breaks.
How can I correct this ?
Jérôme
Hi, I think what you need is the wpautop() WP function:
$post_data[‘my_meta’] = wpautop( $my_custom_field );
Hello there, I am using ACF to make repeater custom field. To display data from those field I am using this code
I have added custom field using the wpak_post_data hook function. The problem is i dont know how to changes code above so i could display it in apps.
Hi, could send an email to support@uncategorized-creations.com?
Lionel gave me this code to show data from repetaer field.
add_filter(
‘wpak_post_data’,
‘add_meta_to_my_app_posts’, 10, 3
);
function
add_meta_to_my_app_posts ( $post_data, $post, $component )
{
//Add our meta to the application
post data :
$post_data[‘sub_field_1’] = array();
$rows =
get_field(‘repeater_field_name’); // Get the
repeater values
if($rows) {
foreach($rows as $row) {
$post_data[‘sub_field_1’][] =
$row[‘sub_field_1’]; // Add each sub
field value to our post data
}
}
return $post_data; //Return the modified
$post_data
}
And add this code into the templates
<ul>
<% _.each( post.sub_field_1,
function( item ) { %>
<li><%= item %></li>
<% } ); %>
</ul>
The problem is its only show one sub_field. I have multiple sub_field of repeater field and I wanna display them in something like this.
<li>(sub_field_1)</li>
<li>(sub_field_2)</li>
<li>(sub_field_3)</li>
<li>(sub_field_4)</li> etc.
Sorry, this is what really i want.
<ul>
<li>(sub_field_1)(sub_field_2)(sub_field_3)(sub_field_4)(sub_field_etc)</li>
</ul>
Hi Ivan,
I just sent you an answer on our support thread. The key is to create multiple loops to go through your sub fields values.