Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Decoupled Development with WordPress JSON APIs

December 05, 2015

Decoupled Development with WordPress JSON APIs

Presentation for WordCamp US 2015


December 05, 2015

More Decks by dirtystylus

Other Decks in Programming


  1. Limits of the Theme Layer as Architecture Theme Layer Plugins

    / Core Permeable Boundary Exciting / awkward game of chance
  2. Static Generator / Renderer • Create a fast and resilient

    user-facing site. • Utilize front-end atomic design tools, minimal/ elegant markup, etc. • Read-only, but highly secure and scalabe.
  3. Hybrid • Build up a REST API on your site

    to power dynamic forms/ dashboards. • Many other functions served directly from WordPress as per normal. • Restrains the scope. Allows for particular experiences to be enhanced.
  4. “Single Page” App • Client side JavaScript application runs in-

    browser, pulls data from WordPress via API. • May include user interactions, or be purely content oriented. • Typically utilize a front- end framework like Angular, Backbone, or React.
  5. Native Mobile App / IoT • WordPress powers embedded applications

    via API. • May also present some web functionality to users. • Drive IOS and Android native apps, as well as “internet of things” implementations.
  6. WordPress-on-WordPress • Separation of concerns, but not technologies. • Front-end

    WordPress can control configuration, caching, throttling. • Develop reusable components for a Service-Oriented / Microservices architecture.
  7. • WordPress CMS with Artwork custom post type • A

    simple web page to consume data and display it two different ways: • A list of teasers • A map. Playing with Data
  8. SANITY CHECK • Enable the WP API Plugin • Make

    sure Permalinks are working • visit /wp-json/wp/v2/posts
  9. • In functions.php: create a type called Artwork • Include

    in arguments when setting up Custom Post Type: ◦show_in_rest ◦rest_base ◦rest_controller_class Custom Post Types
  10. $args = array( 'description' => 'All Artworks', 'public' => true,

    … 'show_in_rest' => true, 'rest_base' => 'artwork', 'rest_controller_class' => 'WP_REST_Posts_Controller', 'supports' => array('title','excerpt','thumbnail'), );
  11. • Use ACF to add fields: ◦ artist ◦ description

    ◦ latitude ◦ longitude Custom Post Types
  12. • ACF to WP-API (adds ACF data to ouput) ◦

    https://wordpress.org/plugins/acf-to-wp-api/ • Better REST API Featured Images (adds Featured Image data to output) ◦ https://wordpress.org/plugins/better-rest-api-featured- images/ Helper Plugins
  13. • Grab JSON data (from the artwork endpoint) • Create

    unordered list of Artwork: thumbnail, artwork name, artist, description • Create map of Artwork: latitude/longitude fed to LeafletJS Recipe
  14. <section class="display-wrapper"> <section class="listing"> <h1>Artwork List</h1> <ul class="post-list"> </ul> </section>

    <section class="map-wrapper"> <h1>Map</h1> <div id="map"></div> </section> </section>
  15. • LeafletJS ◦ http://leafletjs.com • Mapbox (for getting map tiles)

    ◦ https://www.mapbox.com ◦ Get API key Map
  16. $.ajax( { url: 'http://wordcampus2015.local/wp-json/wp/v2/artwork', success: function ( data ) {

    posts = data; for (var i = 0; i < posts.length; i++) { var post = posts[i]; // CREATE LIST ITEMS } }, cache: false } );
  17. var postTeaser = '<li><section class="artwork-teaser"><h1>' + post.title.rendered + '</h1><h2>' +

    post.acf.artist + '</h2><div class="description-wrapper"><div class="artwork- image"><img src="' + post.better_featured_image.media_details.sizes.medium.source_url + '" /></div><div class="artwork-description">' + post.acf.description + '</div></section></li>'; $('.post-list').append(postTeaser);
  18. <li> <section class="artwork-teaser"> <h1>The Schuylkill Chained and The Schuylkill Freed</h1>

    <h2>William Rush (1756 - 1833)</h2> <div class="description-wrapper"> <div class="artwork-image"> <img src="http://wordcampus2015.local/wp-content/ uploads/2015/11/…jpg"> </div> <div class="artwork-description"> <p>As the Fairmount Water …</p> </div> </div> </section> </li>
  19. MAP

  20. var lat = post.acf.latitude; var long = post.acf.longitude; var marker

    = L.marker([lat, long]).addTo(map); marker.bindPopup('<p><strong>' + post.title.rendered + '</strong></p><p>' + post.acf.artist + '</p>');
  21. var map = L.map('map').setView([39.96634264897658, -75.18358930041654], 16); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png? access_token={accessToken}', { attribution:

    'Map data &copy; <a href="http:// openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</ a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', maxZoom: 18, id: ‘[YOUR MAPBOX PROJECT ID]’, accessToken: ‘[YOUR MAPBOX ACCESS TOKEN]’ }).addTo(map);