0

So I have created my wordpress JSON feed with my custom fields inside the JSON feed.

Now how do I display these on an existing page, i.e. show all posts with a custom field value ="dog" inside an existing page (like a wp_query i suppose).

I couldn't find any resources for this.

1

First, you must allow your custom field be queried from the REST API. Let's start simple with an example from 1fix.io:

function my_allow_meta_query( $valid_vars ) {
    $valid_vars = array_merge( $valid_vars, array( 'meta_key', 'meta_value' ) );
    return $valid_vars;
}
add_filter( 'rest_query_vars', 'my_allow_meta_query' );

So, asuming your field name is called "favorite_animal", for this example, you can query the posts using a filter url like this:

http://example.com/wp-json/wp/v2/posts/?filter[meta_key]=favorite_animal&filter[meta_value]=dog

I'd really recommend reading the linked post explaining the example code for your WordPress backend, since meta_key are by default allowed to used only by authenticated users and if you have private data in meta fields, the naive example given here it's a security nightmare.

A simple way to consume the resources returned by the REST endpoint would be showing a list of posts, inside a widget for example, let's assume a <div id="display"></div>

(function($) {
    $(function() {
        var resourceUrl = 'http://example.com/wp-json/wp/v2/posts/?filter[meta_key]=favorite_animal&filter[meta_value]=dog';
        $.get(resourceUrl,
            function(posts) {
                var output = '';
                $.each(posts, function(index, post) {
                    output += '<p><a href="' + post.link + '">' + post.title.rendered.trim() + '</a></p>';
                });
                $('#display').html(output);
            }
        );
    });
})(jQuery);
  • Sorry I don't see anything in the link you provided. Also I have done what you said. My question is what would be an example code to show info of these posts on an existing page. – Joanna Mikalai Aug 26 '16 at 9:50
  • The link of domain with example.com? It's because is an example of the shape of the URL to query posts according to your example meta key and value. The example code from the 1fix.io linked page it's working and you should try it on your own site. Sorry I don't have a site exposing its posts' metadata for you to test this, but I have verified in a local site only for development. About the example code for the frontend, would be ok a simple example with jQuery? Would you share your site url to offer a working example or can I use again the example.com? – Jesús Franco Aug 26 '16 at 16:29
  • perhaps a simple example with jquery would be fine ! – Joanna Mikalai Aug 26 '16 at 17:50
  • I've updated my response with a very simple example, please let me know if you have a more specific idea in mind. BTW editing your own question explaining better what you want to accomplish would be awesome!. – Jesús Franco Aug 26 '16 at 17:56
  • that looks good.. is this faster and more efficient than doing a wp_query ? Do I need to modify your code to include caching ? – Joanna Mikalai Aug 26 '16 at 18:00

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.