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

WP REST API, And the REST is simple - Reuven Karasik

WP REST API, And the REST is simple - Reuven Karasik

נדבר על שימת דגש לפריימווקרים של front end בסביבת וורדפרס – למשל, איך להשתמש בREST API של וורדפרס כדי ליצור תבנית one page באמצעות Angular.js. זה נושא מעניין שיכול לשפר מהירות טעינה ושימוש בהרבה אתרי וורדפרס, ומאפשר למפתחי פרונט אנד להמנע מהצורך ללמוד שפה חדשה (PHP) וללמוד פיתוח וורדפרס (על כל הפונקציות השונות, הוקים וכו') אלא להתמקד בפיתוח והעיצוב בתחומים שבהם הם טובים.

WordCamp Israel

March 28, 2016
Tweet

More Decks by WordCamp Israel

Other Decks in Programming

Transcript

  1. WP REST API
    And the REST is simple*
    Reuven Karasik
    *This pun is good because it’s so bad.

    View full-size slide

  2. Who am I?
    • Reuven Karasik
    • Learned HTML when I was 7
    • Using WordPress since version ~ 3
    • An entrepreneur, leading Made in Jerusalem’s Youth Community
    • Lead Front End developer for Chiprix and Crayze
    • Don’t really go to school
    • Just turned 16

    View full-size slide

  3. Technologies

    View full-size slide

  4. What is the WordPress RESTful API?

    View full-size slide

  5. The WordPress Loop in PHP

    View full-size slide

  6. The ng-repeat loop with Angular

    View full-size slide

  7. Why REST and not the rest?*
    *I’m really sorry, I can’t help it.
    Maybe I need some rest.
    • Cleaner Code
    • Faster Page Loads
    • Automatic Filters
    • No PHP knowledge needed
    • Angular is awesome

    View full-size slide

  8. What is the WordPress RESTful API?

    View full-size slide

  9. What is the WordPress RESTful API?

    View full-size slide

  10. What is the WordPress RESTful API?

    View full-size slide

  11. When AngularJS kicks in

    View full-size slide

  12. Let’s get coding!
    1. Simple WordPress theme with static HTML
    2. Include AngularJS and create the app
    3. Use $http.get() to get all the posts
    4. Turn the static HTML into ng-repeat loop
    5. Make some static content become dynamic
    6. Add a thumbnail with a PHP trick
    7. Add HTML Sanitization

    View full-size slide

  13. Steps forward:
    1. Add navigation, different pages with ng-route
    2. URLs and permalinks
    3. 404 and other error pages
    4. Working with Custom Post Types, Custom Fields etc.
    5. Learn Angular 2.0!

    View full-size slide

  14. Resources:
    • http://v2.wp-api.org/ - Official Documentation
    • https://1fix.io/angularjs-wp-rest-api/ - Amazing Tutorials
    • http://goo.gl/2y27I4 - Tuts+ Introduction Article
    • http://github.com/kinging123/tardis - Full Code From Today
    • https://github.com/1fixdotio/angularjs-demo-theme/ - Ready Theme

    View full-size slide

  15. Thanks for listening!
    Any questions?

    View full-size slide

  16. Reuven Karasik

    [email protected]
    Friend me on Facebook!

    View full-size slide