Quotes
on Design

The API v4.0

Query the API to get quotes

This site uses the WordPress JSON REST API to provide a way for you to grab quotes. The endpoint is http://quotesondesign.com/wp-json/posts, and you can filter the results using a filter parameter on the URL. For example, to grab a single, random post, use this URL:

http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1

If you’re using something like jQuery, it can use the content with it’s own fancy callback magic, like this:

$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("body").append(a[0].content + "<p>— " + a[0].title + "</p>")
});

Otherwise you’ll have to use JSONP so it returns a function you can execute instead (to get around the cross-origin thing), like:

http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback

For a walkthrough of how the JSON REST API works on this site, see this post on CSS-Tricks.

For details on the filter parameters available for you, check out the WP API documentation.

A simple example

From the above-mentioned CSS-Tricks post, here is a snippet using jQuery that grabs & displays a random quote from the site:

$('#get-another-quote-button').on('click', function(e) {
    e.preventDefault();
    $.ajax( {
      url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(data) {
        var post = data.shift(); // The data is an array of posts. Grab the first one.
        $('#quote-title').text(post.title);
        $('#quote-content').html(post.content);

        // If the Source is available, use it. Otherwise hide it.
        if (typeof post.custom_meta !== 'undefined' && typeof post.custom_meta.Source !== 'undefined') {
          $('#quote-source').html('Source:' + post.custom_meta.Source);
        } else {
          $('#quote-source').text('');
        }
      },
      cache: false
    });
  });
});

Even Simpler Live Demo

See the Pen MwaXpq by Chris Coyier (@chriscoyier) on CodePen.

The old API

The old (v3.0) API on this site had more built-in functionality. If you’re interested in copy/pasting code that you can use on your site, check out the old API docs.