By default, WP-AppKit’s web services provide basic info about WordPress posts and custom post types:

  • Title
  • Content
  • Excerpt
  • Featured Image
  • Author
More info here: https://uncategorized-creations.com/wp-appkit/doc/#317-single-html.

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 🙂

Published by Benjamin on November 7, 2014

Head of Digital for a press group, WordPress since 2008, WordCamp organizer, developer for the fun

16 Comments

  1. 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

    Reply
  2. 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.

    Reply
    • So to be sure:

      • You have created a .php file with the tutorial’s code
      • You have created a folder into your app’s theme (in /wp-content/themes-wp-appkit/)
      • You have saved this .php file into the forth-mentioned php folder

      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?

      Reply
  3. I have more than one custom field on single post. What code should I write on php file above?

    Reply
    • You just have to create as many as keys you may need as you’ve created $post_data['any_key_name_here'].

      Reply
        • 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

          Reply
          • 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

  4. Hi,

    I show a CPT on an archive page. Text is ok but without line-breaks.
    How can I correct this ?

    Jérôme

    Reply
  5. Hello there, I am using ACF to make repeater custom field. To display data from those field I am using this code

     

    <?php
    
    // check if the repeater field has rows of data
    if( have_rows('repeater_field_name') ):
    
     	// loop through the rows of data
        while ( have_rows('repeater_field_name') ) : the_row();
    
            // display a sub field value
            the_sub_field('sub_field_name');
    
        endwhile;
    
    else :
    
        // no rows found
    
    endif;
    
    ?>
    
    

    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.

    Reply
  6. 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.

    Reply
  7. 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>

    Reply
    • 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.

      Reply

Leave a Reply to Ivan Nugraha Cancel reply

Your email address will not be published. Required fields are marked *

Having questions?

FAQ | Tutorials | Documentation

Or

Contact Us